最近闲的蛋疼，于是乎就做点立竿见影的事儿，欢迎拍砖，欢迎拍砖！
<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);
}
}
分享到：
相关推荐
PDF分割合并工具（用过最好的PDF分割器，不好用拍砖！）PDF分割合并工具（用过最好的PDF分割器，不好用拍砖！）PDF分割合并工具（用过最好的PDF分割器，不好用拍砖！） 郑重声明：此软件不能合并PDF，合并工具请下载...
5. **欢迎反馈**：开发者表示乐于接受用户的建议和批评，这意味着 RadioCheckBox 会持续更新和改进，以满足更多开发者的需求。 在使用 RadioCheckBox 时，你需要将其集成到你的项目中，然后根据需求配置其属性，如...
集团IT信息化五年规划，参考别人的，欢迎大家拍砖！！！！！！
作者本人闲来无事，正好朋友需要做抽奖转盘特效，因缘际会之下，打算自己动手写一个插件玩玩，素材都是用的网络上面的，看见相同的图片大家别介意。 该插件支持自定义九宫格转盘的高宽奖品数量，Demo...欢迎大家拍砖！
以前学习ListView的时候就经常要用到自定义适配器的ListView， 这两天看到Mars老师的ExpandableListView教学视频，但只讲到了最基本使用。并没有讲到如何定义自己的ExpandableListView...如有不足， 欢迎拍砖!
在"优雅的工作方式（一）——欢迎拍砖"这篇博文中，作者可能分享了自己在实际工作中如何运用源码理解和工具提升效率的心得体会，可能包括一些实战案例和经验分享。遗憾的是，由于没有具体的博客内容，无法提供更详细...
C#版求消灭星星最优解的工具，图形化操作界面，包括求解包含彩色通配色块的关卡（某些游戏有）。欢迎拍砖！
作者本人闲来无事，正好朋友需要做抽奖转盘特效，因缘际会之下，打算自己动手写一个插件玩玩，素材都是用的网络上面的，看见相同的图片大家别介意。 该插件支持自定义九宫格转盘的高宽...欢迎大家拍砖，帮助我完善她！
广州市 机动车道路交通违章查询！可查广东省的。 特点是，其功能可保存 3个 车牌和发动机号的记录! 方便操作。 自带简易游览器。 比起其他查询违章就更加方便了！ 适合各类人操作！...原创软件 欢迎 拍砖！谢谢！！
.NET软件加密技术呕心沥血的总结。为准备计科院的主题演讲而准备了一个星期，最后搜集整理总结而成的资料，吐血推荐，不经典欢迎拍砖！
由于很多网友购买了或者下载java web编程宝典（十年典藏版）的电子书和源代码，但是源代码中没有给jar包我整理了所有的jar包给大家！不一定非得此书的源码能用上，在其他项目中这些jar包还是很有收藏...下错了不要拍砖!
标题中的“新手学j2me，大牛来看看写得如何,欢迎拍砖啊”表明了这是一个关于学习Java ME（J2ME）技术的讨论，作者可能是初学者，希望得到资深开发者的意见和反馈。J2ME是Java的一个版本，主要用于开发移动设备、...
由于很多网友购买了或者下载java web编程宝典（十年典藏版）的电子书和源代码，但是源代码中没有给jar包我整理了所有的jar包给大家！不一定非得此书的源码能用上，在其他项目中这些jar包还是很有收藏...下错了不要拍砖!
这个是我快毕业时，参加培训机构培训后做的一个系统，里面完成了一些基本操作。现已工作多年，现将该软件代码分享给大家。绝对可用且为源码，欢迎拍砖！
这个是我快毕业时，参加培训机构培训后做的一个系统，里面完成了一些基本操作。现已工作多年，现将该软件代码分享给大家。绝对可用且为源码，欢迎拍砖！
这个是我快毕业时，参加培训机构培训后做的一个系统，里面完成了一些基本操作。现已工作多年，现将该软件代码分享给大家。绝对可用且为源码，欢迎拍砖！
这个是我快毕业时，参加培训机构培训后做的一个系统，里面完成了一些基本操作。现已工作多年，现将该软件代码分享给大家。绝对可用且为源码，欢迎拍砖！
一份系统、全面的安卓进阶学习指南（更新中）很棒的 Android 学习指南努力打造一个系统、全面的Android开发者进阶...这是我们的初衷，也是努力的方向，如有不符，欢迎拍砖！内容[计算机组成原理][网络协议][Linux 操作
1.本破解工具可以破解MyEclipse10的所有版本，最新测试版本到MyEclipse10.7 ,MyEclipse 2013也可以破解，均测试有效，欢迎拍砖！ 2.安装好MyEclipse10.X后请先看工具下的“说明.txt”，再看“Myeclipse 10 激活详解...