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>