<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>缓冲</title>
<style>
.divname{ width:400px; height:100px;overflow:hidden;background:#f30; margin:0 auto;}
span{float:left;display:block;padding:5px; cursor:pointer;}
</style>
<script>
//选择器
function $(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}
//========================================================================
//id：对象id
//butid：按钮id
//dir：1为水平方式，2为上下方式
//fnum：最终目标值
//mouse：鼠标事件
//sp：速度
var tt;
function Unfold(id,butid,dir,fnum,mouse,sp){
$(butid)[mouse]=function(){clearInterval(tt);tt=setInterval(mov,5);} //鼠标事件执行效果
function mov(){
var idwh=(dir==1)?parseInt($(id).offsetWidth):parseInt($(id).offsetHeight); //得到容器的宽或高
var v=(fnum<idwh)?Math.floor((fnum-idwh)/sp):Math.ceil((fnum-idwh)/sp); //算出每次运动量
(dir==1)?$(id).style.width=idwh+v+"px":$(id).style.height=idwh+v+"px";
if (v==0){clearInterval(tt);}
$("abc").innerHTML=idwh+"<br>";
}
}
</script>
</head>
<body>
<div style="clear:both; height:30px;">
<span id="but1">左右展开</span>
<span id="but2">左右缩起</span>
<span id="but3">上下展开</span>
<span id="but4">上下缩起</span>
<span id="abc"></span>
</div>
<div class="divname" id="divid"></div>
<script>Unfold("divid","but1",1,900,"onclick",6);</script>
<script>Unfold("divid","but2",1,10,"onclick",6);</script>
<script>Unfold("divid","but3",2,500,"onclick",6);</script>
<script>Unfold("divid","but4",2,10,"onclick",6);</script>
</body>
</html>缓冲效果
最新推荐文章于 2024-09-05 11:49:00 发布
3384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
