问题:做一个带拖动的弹出层效果(像提示框那种)
先写了一半,明天继续奋斗:
javascript 弹出层居中效果的制作 * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:300px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; } 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; } [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
点击右下角的"OPEN"
javascript 弹出层居中效果的制作 * { 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; } open [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
关于每一步的理解,最后解释.毕竟代码还没完全整理
被从中间扩展缓冲的效果算法难住了!
*****************OK,也不算难****************
就是让div的left和top属性随着width一起渐变就行了
javascript 弹出层居中效果的制作 * { 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; } [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]