javascript 彈出層居中效果的制作

更新時間：2009年09月16日 12:32:49 作者：

做一個帶拖動的彈出層效果(像提示框那種) ,看了下代碼與實現(xiàn)效果，值得學習應用。

問題:做一個帶拖動的彈出層效果(像提示框那種)
先寫了一半,明天繼續(xù)奮斗:

點擊右下角的"OPEN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="Stri" /> <title>javascript 彈出層居中效果的制作</title> <style type="text/css"> * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:380px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; z-index:9999; } a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; } a:hover { background-color:#333; color:#fff; font-weight:bold; } #aa { position:fixed; bottom:20px; right:10px; } </style>  </head> <body> <a href="javascript:void(0);" onclick="divcenter();" id="aa">open</a>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

關于每一步的理解,最后解釋.畢竟代碼還沒完全整理
被從中間擴展緩沖的效果算法難住了!
*****************OK,也不算難****************
就是讓div的left和top屬性隨著width一起漸變就行了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="Stri" /> <title>javascript 彈出層居中效果的制作</title> <style type="text/css"> * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:380px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; z-index:9999; } a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; } a:hover { background-color:#333; color:#fff; font-weight:bold; } #aa { position:fixed; bottom:20px; right:10px; } </style>  </head> <body> <a href="javascript:void(0);" onclick="divcenter();" id="aa">提交</a>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: