首页> 心得技巧> 菜鸟跟我学缓冲效果

菜鸟跟我学缓冲效果

时间：2009-06-20 16:54:28 作者：互联网

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

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww***.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww***.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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(/u/info_img/2009-06/20/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> <script> //下面重复的类似的我就不做注释了~~ //fast to slow 由快到慢 //声明一个函数f_s() function f_s(){ var ob***ocument.getElementById("box");//获取ID为box的对象 ob***tyle.display="block";//设置对象obj为显示 ob***tyle.width="1px"; //设置对象obj的宽度为1px var changeW=function(){ //(关于函数这一点，什么闭包，什么类、原型的，弄的我头大了，以后慢慢理解吧。这里我理解的是创建一个函数直接量并把它存进变量changeW里) var obj_w=parseInt(ob***tyle.width);//把对象的宽度转换为一个数值，并存入变量obj_w中； if(obj_w<600){ //判断，如果宽度数值小于600 ob***tyle.width=(obj_w+Ma***ceil((600-obj_w)/15))+"px";//计算对象的宽度。。。随着宽度的变长，递增量越来越小 } else{ clearInterval(bw);//如果大于等于600的话，不再执行setInterval,意思就是这个时候停止增加宽度了。 } } var bw***ndow.setInterval(changeW,1)//每0.001秒调用一次changeW } //slow to fast 由慢到快 //声明一个函数s_f() function s_f(){ var ob***ocument.getElementById("box2"); var e_add=1;//初始化递增量 ob***tyle.display="block"; ob***tyle.width="1px"; var changeW=function(){//我理解的是创建一个函数直接量并把它存进变量changeW里 var obj_w;e_add obj_w=parseInt(ob***tyle.width); e_****=1.05;//以后每次递增的值都是 if(obj_w<600){ ob***tyle.width=(obj_w+e_add)+"px";//随着宽度的变长，递增量越来越大 } else{ clearInterval(bw); ob***tyle.width="600px";//因为(obj_w+e_add)这种计算方法会超出预定义的宽度,所以这里在缓冲完以后重新设置它的宽度.造成一种假象哈哈 } } var bw***ndow.setInterval(changeW,1) } //关闭层 function closeW(id,w){ var ob***ocument.getElementById(id);//获取ID为box的对象 ob***tyle.width=w; var closeDiv=function(){ var obj_w=parseInt(ob***tyle.width); if(obj_w>1){ ob***tyle.width=(obj_w-Ma***ceil(obj_w)/20)+"px";//计算对象的宽度。。。随着宽度的变长，递增量越来越小 } else{ clearInterval(bw); ob***tyle.display="none"; } } var bw***ndow.setInterval(closeDiv,1)//每0.001秒调用一次changeW } //下面这个函数是打开我的↓ function open_my(){ var ob***ocument.getElementById("my_");//获取ID为box的对象 ob***tyle.display="block";//设置对象obj为显示 ob***tyle.width="1px"; //设置对象obj的宽度为1px ob***tyle.height="1px"; var changeW=function(){ //(关于函数这一点，什么闭包，什么类、原型的，弄的我头大了，以后慢慢理解吧。这里我理解的是创建一个函数直接量并把它存进变量changeW里) var obj_w=parseInt(ob***tyle.width);//把对象的宽度转换为一个数值，并存入变量obj_w中； var obj_h=parseInt(ob***tyle.height); if(obj_w<200 && obj_h<150){ //判断，如果宽度数值小于600 ob***tyle.width=(obj_w+Ma***ceil((200-obj_w)/20))+"px";//计算对象的宽度。。。随着宽度的变长，递增量越来越小 ob***tyle.height=(obj_h+Ma***ceil((150-obj_h)/15))+"px"; } else{ clearInterval(bw);//如果大于等于600的话，不再执行setInterval,意思就是这个时候停止增加宽度了。 } } var bw***ndow.setInterval(changeW,1)//每0.001秒调用一次changeW } //下面这个函数是关闭我的↓显示出来的层 function close_my(id){ var ob***ocument.getElementById(id);//获取ID为box的对象 var closeDiv=function(){ var obj_w=parseInt(ob***tyle.width); var obj_h=parseInt(ob***tyle.height); if(obj_w>1 && obj_h >1){ ob***tyle.width=(obj_w-Ma***ceil(obj_w)/20)+"px";//计算对象的宽度。。。随着宽度的变长，递增量越来越小 ob***tyle.height=(obj_h-Ma***ceil(obj_h)/15)+"px"; } else{ clearInterval(bw); ob***tyle.display="none"; } } var bw***ndow.setInterval(closeDiv,1)//每0.001秒调用一次changeW } </script> <body> 首先我要说的是,这些文章是献给和我一样想要学习的们. 论坛里有几位朋友发过缓冲效果,但是象我这种看他们的代码实在是一种痛苦,因为不是一个层次的. 所以我用最最冗余的代码来写出这种效果,目的就是希望们能看懂, 当我们不菜的时候我们再回头去看高手们的东西. 最后,请相信这句话: 有一天也会成为高手,(前提是你要努力哈哈^^) <a href="#" onclick="f_s()">由快到慢</a> <a href="#" onclick="s_f(); return false">由慢到快</a> <div id="box" ><h3>快->慢<a href="#" onclick="closeW('box','600px')">[关闭]</a></h3></div> <div id="box2" ><h3>慢->快<a href="#" onclick="closeW('box2','600px')">[关闭]</a></h3></div> <h3>我们既然做出这种效果了，就要把它应用到实际当中去</h3> <h3>现在来看一下缓冲效果在实际当中的应用</h3> <div id="my"> <a href="#" class="bt_down" onmouseover="open_my()">我的</a> <div class="my_" id="my_" > <ul> <li>我的话题</li> <li>我的收藏</li> <li>我的权限</li> <li>我的投票</li> <li>我的活动</li> <li>我的同城</li> <li>我的作品</li> <li>我的地址</li> <li>我的专长</li> <li>我的好友</li> <li>我的空间</li> <li><a href="#" onclick="close_my('my_')">关闭</a></li> </ul> </div> </div> <div id="s_img" style="width:430px;"> <div id="imgs" style="width:1700px;"> <ul> <li><img src="https://images.downcodes.com/u/info_img/2009-06/20/work_577_8421_20080902_112516_6677857_t.jpg" /></li> <li><img src="https://images.downcodes.com/u/info_img/2009-06/20/work_352426_8413_20080901_201448_1164245_t.jpg" /></li> <li><img src="https://images.downcodes.com/u/info_img/2009-06/20/work_291488_8330_20080829_151402_6235352_t.jpg" /></li> <li><img src="https://images.downcodes.com/u/info_img/2009-06/20/work_577_8423_20080902_115301_643310_t.jpg" /></li> <li><img src="https://images.downcodes.com/u/info_img/2009-06/20/work_23709_8344_20080830_123900_9878235_t.jpg" /></li> <li><img src="https://images.downcodes.com/u/info_img/2009-06/20/work_387129_8408_20080901_180829_5234680_t.png" /></li> <li><img src="https://images.downcodes.com/u/info_img/2009-06/20/work_443685_8362_20080831_093043_8349305_t.jpg" /></li> <li><img src="https://images.downcodes.com/u/info_img/2009-06/20/work_202433_8401_20080901_163123_1710510_t.jpg" /></li> </ul> </div> </div> <a href="#" onclick="scrol(); return false">向左滚动</a> <a href="#" onclick="scror(); return false">向右滚动</a> 当然,上面这种效果只是我用来演示缓冲效果的, 它并不适合做这种效果,因为我这里写的函数只会转一次. 多次的话用这种方法好象不是很好实现, 最后我说一下,不要被我这里的代码吓跑, 看上去代码很多,主要是后面2个列子的原因使代码看起来很多 真正重要的是f_s(),s_f(),closeW() 如果能够看明白,那么你也可以举一反三了. 今天就说到这里了,希望这些东西能对你有一点帮助^^ by 褪色 <script type="text/javascript"> function scror(){ var ob***ocument.getElementById("s_img"); var h=function(){ var obj_w=parseInt(ob***tyle.width); if(ob***crollLeft<obj_w){ ob***crollLeft=(ob***crollLeft+Ma***ceil((obj_w-ob***crollLeft)/15)); } else{ clearInterval(bw); } } var bw***ndow.setInterval(h,1) } function scrol(){ var ob***ocument.getElementById("s_img"); var h=function(){ var obj_w=parseInt(ob***tyle.width); if(ob***crollLeft>1){ ob***crollLeft-=Ma***ceil(obj_w)/50; } else{ clearInterval(bw); } } var bw***ndow.setInterval(h,1) //ob***crollLeft-=parseInt(ob***tyle.width); } </script> </body> </html>
th***offsetParent.getElementsByTagName('textarea')[0])" type=button value=运行代码> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

//slow to fast 由慢到快
//声明一个函数s_f()
function s_f(){
 var ob***ocument.getElementById("box2");
 var e_add=1;//初始化递增量
 ob***tyle.display="block";
 ob***tyle.width="1px";
 var changeW=function(){//我理解的是创建一个函数直接量并把它存进变量changeW里
 var obj_w;e_add
 obj_w=parseInt(ob***tyle.width);
 e_****=1.05;//以后每次递增的值都是
 if(obj_w<600){
 ob***tyle.width=(obj_w+e_add)+"px";//随着宽度的变长，递增量越来越大
 }
 else{
 clearInterval(bw);
 ob***tyle.width="600px";//因为(obj_w+e_add)这种计算方法会超出预定义的宽度,所以这里在缓冲完以后重新设置它的宽度.造成一种假象哈哈
 }
 }
 var bw***ndow.setInterval(changeW,1)
}

特色栏目

游戏频道

专题合集

菜鸟跟我学缓冲效果

相关应用

按个摩心得app

神角技巧手游

热门文章

猜你喜欢