尊敬的客户您好,经我们多年的网站制作、网络营销经验,请建站和优化同时做,以达到最好的推广效果!----创赢网络 2012-06
加入收藏设为首页
  • [2013-8-7]洛阳贷款 洛阳小额贷款公司网站上线
  • [2013-8-4]洛阳开锁公司 洛阳开锁电话优化
  • [2013-5-25]洛阳聚鑫钢绳有限公司网站上线
  • [2013-5-20]吉利区图书馆网站备案通过上线开通
  • [2013-5-13]洛阳旭晋昇商贸有限公司 食品批发零售
  • [2013-4-14]洛阳市建投节能技术服务有限公司 新版上线
  • [2013-4-11]南阳顽石玉器工作室网站上线
  • ------专业网站设计制作、网站排名优化、建设一流品牌!
    新闻正文 ·您的位置:首页 > 新闻中心 > 技术中心 > 查看新闻

    JS+DIV的页面缓冲效果收集整理

    作者:redroom  来源:redroom  发表时间:2009-8-21 8:30:31  点击:12241
    论坛里有几位朋友发过缓冲效果,但是象我这种菜鸟看他们的代码实在是一种痛苦,因为不是一个层次的.
    所以我用最最冗余的代码来写出这种效果,目的就是希望菜鸟们能看懂,
    当我们不菜的时候我们再回头去看高手们的东西.
    以下是引用片段:
    <!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>&nbsp;&nbsp;<br /><br />
    <a href="#" onclick="s_f(); return false">由慢到快</a>&nbsp;&nbsp;<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 />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>

    关键是代码片段1:

    以下是引用片段:
    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
    }

    代码片段2:

    以下是引用片段:
    //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)
    }

    能看懂的话,你就可以举一反三。

    您的需求

    联系我们

    正确的选择

    金亚洲安全吗