本文實例講述了JS帶緩沖效果打開、關閉、移動一個層的方法。分享給大家供大家參考。具體實現方法如下：
<!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程序設計有所幫助。
新聞熱點
疑難解答
