這篇文章主要介紹了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>希望本文所述對大家的javascript程序設計有所幫助。