您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
JS实现带缓冲效果打开、关闭、移动一个层的方法
作者：佚名 责任编辑：admin 更新时间：2022-06-22
这篇文章主要介绍了JS实现带缓冲效果打开、关闭、移动一个层的方法,涉及javascript鼠标事件及页面元素操作技巧,需要的朋友可以参考下
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 <!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" lang="gb2312"> <head> <title>JavaScript缓冲打开层</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <style type="text/css"> * { margin:0; padding:0; } body { margin:5px auto; text-align:center; background:#f0f0f0; } #d1 { position:absolute; top:20px; left:20px; width:100px; height:60px; border:1px solid #808; } #d2 { position:absolute; top:100px; left:20px; width:100px; height:60px; border:1px solid #808; } #open1, #close1, #open2, #close2 { cursor:pointer; background:#ccf; margin:5px; } #open1, #open2 { display:block; } #close1, #close2 { display:none; } </style> </head> <body> <div id="d1"> 移动位置 <span id="open1" onclick="fo1()">Open</span> <span id="close1" onclick="fc1()">Close</span> </div> <div id="d2"> 改变大小 <span id="open2" onclick="fo2()">Open</span> <span id="close2" onclick="fc2()">Close</span> </div> <div id="debug">AAA</div> <script type="text/javascript"> //<[CDATA[ var sl = 20; //初始left值 var el = 500; //结束left值 var sw = 100;//初始width值 var ew = 580;//结束width值 var p = 10; //缓冲变量 var t = 20; //时间变量 var d1 = document.getElementById('d1'); var d2 = document.getElementById('d2'); var debug = document.getElementById('debug'); var open1 = document.getElementById('open1'); var close1 = document.getElementById('close1'); var open2 = document.getElementById('open2'); var close2 = document.getElementById('close2'); function fo1() { var cl = parseInt(getStyle(d1,'left')); //当前left值 if (cl<el) { d1.style.left = cl + Math.ceil((el-cl)/p) + 'px'; //当前值+缓冲增量 debug.innerHTML = getStyle(d1,'left'); //cl + 'px'; setTimeout('fo1()', t); } else { d1.style.left = el + 'px'; open1.style.display = 'none'; close1.style.display = 'block'; } } function fc1() { var cl = parseInt(getStyle(d1,'left')); //当前left值 if (cl>sl) { d1.style.left = cl - Math.ceil((cl-sl)/p) + 'px'; //当前值-缓冲增量 debug.innerHTML = getStyle(d1,'left'); //cl + 'px'; setTimeout('fc1()', t); } else { d1.style.left = sl + 'px'; open1.style.display = 'block'; close1.style.display = 'none'; } } function fo2() { var cw = parseInt(getStyle(d2,'width')); //当前width值 if (cw<ew) { d2.style.width = cw + Math.ceil((ew-cw)/p) + 'px'; //当前值+缓冲增量 debug.innerHTML = getStyle(d2,'width'); //cw + 'px'; setTimeout('fo2()', t); } else { d2.style.width = ew + 'px'; open2.style.display = 'none'; close2.style.display = 'block'; } } function fc2() { var cw = parseInt(getStyle(d2,'width')); //当前width值 if (cw>sw) { d2.style.width = cw - Math.ceil((cw-sw)/p) + 'px'; //当前值-缓冲增量 debug.innerHTML = getStyle(d2,'width'); //cw + 'px'; setTimeout('fc2()', t); } else { d2.style.width = sw + 'px'; open2.style.display = 'block'; close2.style.display = 'none'; } } function getStyle( elem, name ) { if (elem.style[name]) { return elem.style[name]; } else if (elem.currentStyle) { return elem.currentStyle[name]; } else if (document.defaultView && document.defaultView.getComputedStyle){ name = name.replace(/([A-Z])/g,"-$1"); name = name.toLowerCase(); var s = document.defaultView.getComputedStyle(elem,""); return s && s.getPropertyValue(name); } else { return null; } } //]]> </script> </body> </html>- 上一个程序编程： js实现顶部可折叠的菜单工具栏效果实例
- 下一个程序编程： javascript实现淡蓝色的鼠标拖动选择框实例
