^{<noscript id="iz8px"></noscript>}

JS實現帶緩沖效果打開、關閉、移動一個層的方法

2024-05-06 16:19:43

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了JS實現帶緩沖效果打開、關閉、移動一個層的方法,涉及javascript鼠標事件及頁面元素操作技巧,需要的朋友可以參考下

本文實例講述了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>