菜鸟跟我学缓冲效果

王朝学院·作者佚名 2009-03-23

首先我要说的是,我是菜鸟,这些文章是献给和我一样想要学习的菜鸟们.论坛里有几位朋友发过缓冲效果,但是象我这种菜鸟看他们的代码实在是一种痛苦,因为不是一个层次的.所以我用最最冗余的代码来写出这种效果,目的就是希望菜鸟们能看懂,当我们不菜的时候我们再回头去看高手们的东西.最后,请相信这句话:

有一天菜鸟也会成为高手,(前提是你要努力哈哈^^)

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

<style>

body { font-size:12px}

#box { background:#FFFFCC; border:1px solid #FFCC66; width:600px; height:100px;display:none; text-align:right; margin:2px; overflow:hidden}

#box2 { background:#CDEDEC; border:1px solid #3399CC; width:600px; height:100px;display:none;text-align:right; margin:2px; overflow:hidden}

.bt_down {background: #DDDCE4 url(http://bbs.blueidea.com/images/default/arrow_down.gif) no-repeat 35px 46%; padding:5px 20px 5px 5px; text-align:left}

#my {}

#my .my_ { background:#DDDCE4; width:200px; height:150px; display:none; overflow:hidden}

#my .my_ ul{ list-style:none; padding:0; margin:10px 0 10px 10px; height:140px}

#my .my_ ul li { width:48%; float:left; text-align:center; line-height:22px; border-bottom:1px solid #B6B6C0}

#s_img { width:430px; overflow:scroll; overflow-y:hidden;overflow-x:hidden; border:1px solid #ccc}

#imgs ul { list-style:none; margin-left:0; padding-left:0}

#imgs ul li{ float:left; margin:3px;}

</style>

//下面重复的类似的我就不做注释了~~

//fast to slow 由快到慢

//声明一个函数f_s()

function f_s(){

var obj=document.getElementById("box");//获取ID为box的对象

obj.style.display="block";//设置对象obj为显示

obj.style.width="1px";//设置对象obj的宽度为1px

var changeW=function(){ //(关于函数这一点，什么闭包，什么类、原型的，弄的我头大了，以后慢慢理解吧。这里我理解的是创建一个函数直接量并把它存进变量changeW里)

var obj_w=parseInt(obj.style.width);//把对象的宽度转换为一个数值，并存入变量obj_w中；

if(obj_w<600){ //判断，如果宽度数值小于600

obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//计算对象的宽度。。。随着宽度的变长，递增量越来越小

}

else{

clearInterval(bw);//如果大于等于600的话，不再执行setInterval,意思就是这个时候停止增加宽度了。

}

var bw=window.setInterval(changeW,1)//每0.001秒调用一次changeW

}

//slow to fast 由慢到快

//声明一个函数s_f()

function s_f(){

var obj=document.getElementById("box2");

var e_add=1;//初始化递增量

obj.style.display="block";

obj.style.width="1px";

var changeW=function(){//我理解的是创建一个函数直接量并把它存进变量changeW里

var obj_w;e_add

obj_w=parseInt(obj.style.width);

e_add*=1.05;//以后每次递增的值都是

if(obj_w<600){

obj.style.width=(obj_w+e_add)+"px";//随着宽度的变长，递增量越来越大

}

else{

clearInterval(bw);

obj.style.width="600px";//因为(obj_w+e_add)这种计算方法会超出预定义的宽度,所以这里在缓冲完以后重新设置它的宽度.造成一种假象哈哈

}

var bw=window.setInterval(changeW,1)

}

//关闭层

function closeW(id,w){

var obj=document.getElementById(id);//获取ID为box的对象

obj.style.width=w;

var closeDiv=function(){

var obj_w=parseInt(obj.style.width);

if(obj_w>1){

obj.style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//计算对象的宽度。。。随着宽度的变长，递增量越来越小

}

else{

clearInterval(bw);

obj.style.display="none";

}

var bw=window.setInterval(closeDiv,1)//每0.001秒调用一次changeW

}

//下面这个函数是打开我的↓

function open_my(){

var obj=document.getElementById("my_");//获取ID为box的对象

obj.style.display="block";//设置对象obj为显示

obj.style.width="1px";//设置对象obj的宽度为1px

obj.style.height="1px";

var obj_w=parseInt(obj.style.width);//把对象的宽度转换为一个数值，并存入变量obj_w中；

var obj_h=parseInt(obj.style.height);

if(obj_w<200 && obj_h<150){ //判断，如果宽度数值小于600

obj.style.width=(obj_w+Math.ceil((200-obj_w)/20))+"px";//计算对象的宽度。。。随着宽度的变长，递增量越来越小

obj.style.height=(obj_h+Math.ceil((150-obj_h)/15))+"px";

}

else{

clearInterval(bw);//如果大于等于600的话，不再执行setInterval,意思就是这个时候停止增加宽度了。

}

var bw=window.setInterval(changeW,1)//每0.001秒调用一次changeW

}

//下面这个函数是关闭我的↓显示出来的层

function close_my(id){

var obj=document.getElementById(id);//获取ID为box的对象

var closeDiv=function(){

var obj_w=parseInt(obj.style.width);

var obj_h=parseInt(obj.style.height);

if(obj_w>1 && obj_h >1){

obj.style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//计算对象的宽度。。。随着宽度的变长，递增量越来越小

obj.style.height=(obj_h-Math.ceil(obj_h)/15)+"px";

}

else{

clearInterval(bw);

obj.style.display="none";

}

var bw=window.setInterval(closeDiv,1)//每0.001秒调用一次changeW

}

</script>

<body>

首先我要说的是,这些文章是献给和我一样想要学习的菜鸟们.<br /><br />

论坛里有几位朋友发过缓冲效果,但是象我这种菜鸟看他们的代码实在是一种痛苦,因为不是一个层次的.<br /><br />

所以我用最最冗余的代码来写出这种效果,目的就是希望菜鸟们能看懂,<br /><br />

当我们不菜的时候我们再回头去看高手们的东西.<br /><br />

最后,请相信这句话:<br /><br />

有一天菜鸟也会成为高手,(前提是你要努力哈哈^^)<br /><br />

<h3>我们既然做出这种效果了，就要把它应用到实际当中去</h3>

<h3>现在来看一下缓冲效果在实际当中的应用</h3>

<ul>

</ul>

</div>

<br />

<ul>

</ul>

</div>

</div><br />

当然,上面这种效果只是我用来演示缓冲效果的,<br /><br />

它并不适合做这种效果,因为我这里写的函数只会转一次.<br /><br />

多次的话用这种方法好象不是很好实现,<br /><br />

最后我说一下,不要被我这里的代码吓跑,<br /><br />看上去代码很多,主要是后面2个列子的原因使代码看起来很多<br /><br />

真正重要的是f_s(),s_f(),closeW()<br /><br />

如果能够看明白,那么你也可以举一反三了.<br /><br />

今天就说到这里了,希望这些东西能对你有一点帮助^^<br /><br />

                                          by 褪色<br /><br />

function scror(){

var obj=document.getElementById("s_img");

var h=function(){

var obj_w=parseInt(obj.style.width);

if(obj.scrollLeft<obj_w){

obj.scrollLeft=(obj.scrollLeft+Math.ceil((obj_w-obj.scrollLeft)/15));

}

else{

clearInterval(bw);

}

var bw=window.setInterval(h,1)

}

function scrol(){

var obj=document.getElementById("s_img");

var h=function(){

var obj_w=parseInt(obj.style.width);

if(obj.scrollLeft>1){

obj.scrollLeft-=Math.ceil(obj_w)/50;

}

else{

clearInterval(bw);

}

var bw=window.setInterval(h,1)

//obj.scrollLeft-=parseInt(obj.style.width);

}

</script>

</body>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

关键代码请看这两个就可以了：

function f_s(){

var obj=document.getElementById("box");//获取ID为box的对象

obj.style.display="block";//设置对象obj为显示

obj.style.width="1px"; //设置对象obj的宽度为1px

var obj_w=parseInt(obj.style.width);//把对象的宽度转换为一个数值，并存入变量obj_w中；

if(obj_w<600){ //判断，如果宽度数值小于600

obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//计算对象的宽度。。。随着宽度的变长，递增量越来越小

}

else{

clearInterval(bw);//如果大于等于600的话，不再执行setInterval,意思就是这个时候停止增加宽度了。

}

var bw=window.setInterval(changeW,1)//每0.001秒调用一次changeW

}

//slow to fast 由慢到快

//声明一个函数s_f()

function s_f(){

var obj=document.getElementById("box2");

var e_add=1;//初始化递增量

obj.style.display="block";

obj.style.width="1px";

var changeW=function(){//我理解的是创建一个函数直接量并把它存进变量changeW里

var obj_w;e_add

obj_w=parseInt(obj.style.width);

e_add*=1.05;//以后每次递增的值都是

if(obj_w<600){

obj.style.width=(obj_w+e_add)+"px";//随着宽度的变长，递增量越来越大

}

else{

clearInterval(bw);

obj.style.width="600px";//因为(obj_w+e_add)这种计算方法会超出预定义的宽度,所以这里在缓冲完以后重新设置它的宽度.造成一种假象哈哈

}

var bw=window.setInterval(changeW,1)

}