你的位置:首页 > Java教程

[Java教程]javascript小例子:實現四方向文本无缝滚动效果


实现一个文本无缝滚动的效果:

 

 

 

一些問題:

本地測試沒問題,但是 通過document.write()把代碼輸入執行后,垂直模式下的li的高度height()獲取會有問題。原因不明,非常不解..

源代碼:

<!DOCTYPE html>  <!--[if lt IE 7 ]> <html lang="zh-CN" > <![endif]--><!--[if IE 7 ]> <html lang="zh-CN" > <![endif]--><!--[if IE 8 ]> <html lang="zh-CN" > <![endif]--><!--[if IE 9 ]> <html lang="zh-CN" > <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="zh-CN"> <!--<![endif]--><head><title>文字滚动</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><style type="text/css">*{margin:0;padding:0;}body{padding:20px;} .textbox{border:1px solid #ddd;width:auto;overflow: hidden;} .textbox ul{list-style: none;position: relative;} .textbox ul li{padding:5px 0;}</style></head><body class="home-page">  <div id="textbox" class="textbox">    <ul>      <li>汽车 | 运动B级车降3万5 </li>      <li>家居 | 这么厉害的装修 女人真的要坐不住了</li>      <li>教育 | 各省前三报考华工重奖10万元/人</li>      <li>汽车 | 运动B级车降3万5 平行进口车加价11万</li>      <li>健康 | 滥用激素酿苦果 14岁男孩10年不长个儿</li>      <li>数码 | 最新手机报价 说好的宽带降费提速呢?</li>      <li>汽车 | 平行进口车加价11万</li>      <li>汽车 | 运动B级车降3万5</li>      <li>汽车 | 平行进口车加价11万</li>      <li>运动 | 恒大亚冠生死战 猜比分赢正版球衣</li>    </ul>    <a href="#" class="btnPrev">向左</a>    <a href="#" class="btnNext">向右</a>  </div>  <br>  <br>  <div id="textbox2" class="textbox">    <ul>      <li>汽车 | 运动B级车降3万5 </li>      <li>家居 | 这么厉害的装修 女人真的要坐不住了</li>      <li>教育 | 各省前三报考华工重奖10万元/人</li>      <li>汽车 | 运动B级车降3万5 平行进口车加价11万</li>      <li>健康 | 滥用激素酿苦果 14岁男孩10年不长个儿</li>      <li>数码 | 最新手机报价 说好的宽带降费提速呢?</li>      <li>汽车 | 平行进口车加价11万</li>      <li>汽车 | 运动B级车降3万5</li>      <li>汽车 | 平行进口车加价11万</li>      <li>运动 | 恒大亚冠生死战 猜比分赢正版球衣</li>    </ul>    <a href="#" class="btnPrev">向上</a>    <a href="#" class="btnNext">向下</a>  </div>  <script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>  <script type="text/javascript">    //四方向无缝滚动    scroll('#textbox',{vis:2,btnHidden:false,dir:'prev',type:'h'});    scroll('#textbox2',{vis:3,btnHidden:false,dir:'prev',type:'v'});    function scroll(container,options){      var box = $(container);      var boxUl = box.find('ul').eq(0);      var LiHeight = 0; //不包含克隆li列表高度      var cloneLiHeight = 0; //包含克隆li列表高度      var LiWidth = 0; //不包含克隆li列表宽度      var cloneLiWidth = 0; //包含克隆li列表宽度      var Lis = boxUl.children();      var btnPrev = box.find('.btnPrev');      var btnNext = box.find('.btnNext');      //默认参数      var defult= {        vis : 2, //显示个数        autoPlay:true, //自动播放        speed :50, //滚动速度        dir:'prev', //滚动方向        btnHidden:false, //按钮是否隐藏        type:'v' // 水平或者垂直方向      };      var opt = $.extend({},defult,options);      //构建DOM结构      var lastClone=0; //最后克隆元素      var lastCloneHeight=0;//最后克隆元素高度      var allCloneHeight=0;//全部克隆元素总高度      var lastCloneWidth=0;      var allCloneWidth=0;      var visHeight=0; //可视高度      var visWidth=0;      var boxUl_wrap;      if(opt.type === "v"){ //垂直方向        Lis.each(function(){          $(this).height($(this).height());          LiHeight += $(this).outerHeight(true);        });        lastClone= boxUl.children(':last').clone().addClass('clone').prependTo(boxUl);        lastCloneHeight = lastClone.outerHeight(true);        allCloneHeight = lastClone.outerHeight(true);        for(var i = 0; i < opt.vis ; i++){          Lis.eq(i).clone().addClass('clone').appendTo(boxUl);          allCloneHeight += Lis.eq(i).outerHeight(true);        }        visHeight = allCloneHeight - lastCloneHeight;        cloneLiHeight = LiHeight + allCloneHeight;                boxUl_wrap = $('<div></div>').css({'width':'100%','height':visHeight,'overflow':'hidden','position':'relative'}).attr('id','ulWrap');        boxUl.css({'height':cloneLiHeight,'top':-lastCloneHeight}).wrap(boxUl_wrap);      }else if(opt.type ==="h"){ //水平方向        Lis.css({'whiteSpace':'nowrap','float':'left','paddingRight':'10px'});        Lis.each(function(){          $(this).width($(this).width());          LiWidth += $(this).outerWidth(true);        });        lastClone= boxUl.children(':last').clone().addClass('clone').prependTo(boxUl);        lastCloneWidth= lastClone.outerWidth(true);        allCloneWidth = lastClone.outerWidth(true);        for(var j = 0; j < opt.vis ; j++){          Lis.eq(j).clone().addClass('clone').appendTo(boxUl);          allCloneWidth += Lis.eq(j).outerWidth(true);        }        visHeight = Lis.eq(0).outerHeight(true);        visWidth = allCloneWidth - lastCloneWidth;        cloneLiWidth = LiWidth + allCloneWidth;                boxUl_wrap = $('<div></div>').css({'width':visWidth,'height':visHeight,'overflow':'hidden','position':'relative'}).attr('id','ulWrap');        boxUl.css({'width':cloneLiWidth,'left':-lastCloneWidth}).wrap(boxUl_wrap);        box.css({'width':visWidth});      }      //添加事件处理      var timer = null;      var scrollTop = function(){        clearInterval(timer);          timer = setInterval(function(){            var tmp = parseInt(boxUl.css('top').replace('px',""));            tmp--;            boxUl.animate({'top':tmp},0,function(){              if(tmp <= -(LiHeight + lastCloneHeight)){                boxUl.css('top',-lastCloneHeight);              }            });          },opt.speed);      };      var scrollDown = function(){        clearInterval(timer);          timer = setInterval(function(){            var tmp = parseInt(boxUl.css('top').replace('px',""));            tmp++;            boxUl.animate({'top':tmp},0,function(){              if(tmp >= 0){                boxUl.css('top',-(LiHeight));              }            });          },opt.speed);      };      var scrollLeft = function(){        clearInterval(timer);          timer = setInterval(function(){            var tmp = parseInt(boxUl.css('left').replace('px',""));            tmp--;            boxUl.animate({'left':tmp},0,function(){              if(tmp <= -(LiWidth + lastCloneWidth)){                boxUl.css('left',-(lastCloneWidth));              }            });          },opt.speed);      };            var scrollRight = function(){        clearInterval(timer);          timer = setInterval(function(){            var tmp = parseInt(boxUl.css('left').replace('px',""));            tmp++;            boxUl.animate({'left':tmp},0,function(){              if(tmp >= 0){                boxUl.css('left',-(LiWidth));              }            });          },opt.speed);      };      var scrollType = function(type,dir){        if(Lis.length >= opt.vis){ //显示个数不能多于列表个数,否则不显示效果          var sdir = typeof dir!=="undefined" ? dir : opt.dir;          switch(type){            case "v":              if(sdir == "prev"){scrollTop();}else{scrollDown();}              break;            case "h":              if(sdir == "prev"){scrollLeft();}else{scrollRight();}          }        }      };      if(opt.autoPlay){        scrollType(opt.type);      }      //添加事件处理      box.find('#ulWrap').hover(function(){        clearInterval(timer);      },function(){        scrollType(opt.type);      });      //按钮是否隐藏      if(!opt.btnHidden){        btnPrev.unbind('mouseover');        btnNext.unbind('mouseover');        btnPrev.mouseover(function(){          scrollType(opt.type,"prev");        });        btnNext.mouseover(function(){          scrollType(opt.type,"next");        });      }else{        btnPrev.hide();        btnNext.hide();      }    }  </script></body></html>

View Code

 demo:

Download