菜鸟跟我学缓冲效果 - 网页制作

　菜鸟跟我学缓冲效果

作者：FFEEDD　时间： 2009-03-18　文档类型：原创　来自：蓝色理想

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

运行代码框
<!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=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(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> <script> //下面重复的类似的我就不做注释了~~ //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 changeW=function(){ //(关于函数这一点，什么闭包，什么类、原型的，弄的我头大了，以后慢慢理解吧。这里我理解的是创建一个函数直接量并把它存进变量changeW里) 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 /> <a href="#" onclick="f_s()">由快到慢</a>  <br /><br /> <a href="#" onclick="s_f(); return false">由慢到快</a>  <br /><br /> <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> <br /> <br /> <div id="s_img" style="width:430px;"> <div id="imgs" style="width:1700px;"> <ul> <li><img src="http://case.blueidea.cn/files/2008/09/02/work_577_8421_20080902_112516_6677857_t.jpg" /></li> <li><img src="http://case.blueidea.cn/files/2008/09/01/work_352426_8413_20080901_201448_1164245_t.jpg" /></li> <li><img src="http://case.blueidea.cn/files/2008/08/29/work_291488_8330_20080829_151402_6235352_t.jpg" /></li> <li><img src="http://case.blueidea.cn/files/2008/09/02/work_577_8423_20080902_115301_643310_t.jpg" /></li> <li><img src="http://case.blueidea.cn/files/2008/08/30/work_23709_8344_20080830_123900_9878235_t.jpg" /></li> <li><img src="http://case.blueidea.cn/files/2008/09/01/work_387129_8408_20080901_180829_5234680_t.png" /></li> <li><img src="http://case.blueidea.cn/files/2008/08/31/work_443685_8362_20080831_093043_8349305_t.jpg" /></li> <li><img src="http://case.blueidea.cn/files/2008/09/01/work_202433_8401_20080901_163123_1710510_t.jpg" /></li> </ul> </div> </div><br /> <a href="#" onclick="scrol(); return false">向左滚动</a> <a href="#" onclick="scror(); return false">向右滚动</a><br /><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 /> <script type="text/javascript"> 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 全部选择提示：你可先修改部分代码，再按运行]

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

//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)
}

经典论坛交流：
http://bbs.blueidea.com/thread-2883594-1-1.html

本文链接：http://www.blueidea.com/tech/web/2009/6523.asp　

出处：蓝色理想
责任编辑：bluehearts

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

相关文章

更多相关链接

手工打造分离式滑动门导航菜单

提升JavaScript运行速度之DOM篇

提升JavaScript运行速度之递归篇

提升JavaScript运行速度之函数篇

photoshop艺术效果


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule