无缝滚动插件版，欢迎拍砖!

lsunwing · 发表于 2013-2-4 21:52:45

最近闲的蛋疼，于是乎就做点立竿见影的事儿，欢迎拍砖，欢迎拍砖！

<html><head> <title>Jquery实现无缝滚动</title> <link type="text/css" rel="stylesheet" href="style.css"/> <script language="javascript" src="jquery.js"></script> <script language="javascript" src="script.js"></script></head><body><div> <div class="main">       <div class="roll" id="roll">          <div class="caption"><a href="http://www.baidu.com/" target="_blank">aaaaaaaaaaaaa</a></div>          <div class="caption">bbbbbbbbbbbbb</div>          <div class="caption">ccccccccccccc</div>          <div class="caption">ddddddddddddd</div>          <div class="caption">eeeeeeeeeeeee</div>          <div class="caption">fffffffffffff</div>          <div class="caption">ggggggggggggg</div>          <div class="caption">hhhhhhhhhhhhh</div>          <div class="caption">iiiiiiiiiiiii</div>          <div class="caption">jjjjjjjjjjjjj</div>          <div class="caption">kkkkkkkkkkkkk</div>          <div class="caption">mmmmmmmmmmmmm</div>          <div class="caption">nnnnnnnnnnnnn</div>       </div> </div></div></body></html>
*{margin:0 0;padding:0px;}.main{width:200px;height:200px;overflow:hidden;border:1px #666 solid;}.roll{float:left;top:0px;}.caption{height:20px;line-height:20px;margin-left:20px;}
$(document).ready(function(){ $("#roll").myRoll("slow");});/** * @description  无缝滚动插件版 * @param       speed:滚动速度控制参数，字符串类型参数字符串支持为slow，normal，fast三种 *             数字类型参数范围是：1 —— 100（数字越小滚动越快） * @author    lsunwing * @date       2010/06/23 */$.fn.myRoll = function(speed){       //滚动窗口的高 var rollHeight = this.parent().height(); //滚动条目数组 var rollArray = this.find("div"); //滚动条目数组个数 var number = rollArray.size(); //滚动条目的高 var height = rollArray.eq(0).height();       var obj = this;       // 滚动速度控制 var range = 1;  //滚动幅度 var interval = 10;  //滚动时间间隔 if(speed){       if(typeof speed == "string"){          if(speed == "slow"){interval = 100;          }else if(speed == "normal"){             interval = 50;          }else if (speed == "fast"){             interval = 10;          }else{             range = 1;          }       }else if(typeof speed == "number"){          if(Math.ceil(speed) >= speed && Math.ceil(speed) <=100){             interval = Math.ceil(speed);          }else{             interval = 100;          }       }else{          range = 1;          interval = 100;       } }else{       range = 1;       interval = 100; }       var top = 0; var flag = 0; //时间循环滚动 var timeId; if(number > rollHeight/height){       //开始滚动       timeId = setInterval(startRoll,interval); }else{       //内容高度小于滚动框的高度，不滚动 } //鼠标动作 $(this).hover(       function(){          clearInterval(timeId);       },       function(){          timeId = setInterval(startRoll,interval);       } ); //滚动次数 var c = Math.ceil(height/range); function startRoll(){       flag++;       if(flag >= c){                      rollArray.eq(0).remove();          obj.append($(rollArray).eq(0));          //重新获得一下数组          rollArray = obj.find("div");          top = top + height;          flag = 0;       }       top = top - range;             obj.css("margin-top",top); }}

		自动登录	找回密码
密码			立即注册

无缝滚动插件版，欢迎拍砖!

浏览过的版块