具体可见示例：模拟Marquee无缝滚动
代码如下：
/**
* @classDescription 模拟Marquee，无间断滚动内容
* @author Aken Li(www.kxbd.com)
* @DOM
* <div id="marquee">
* <ul>
* <li></li>
* <li></li>
* </ul>
* </div>
* @CSS
* #marquee {width:200px;height:50px;overflow:hidden;}
* @Usage
* $('#marquee').kxbdMarquee(options);
* @options
* isEqual:true,//所有滚动的元素长宽是否相等,true,false
* loop: 0,//循环滚动次数，0时无限
* direction: 'left',//滚动方向，'left','right','up','down'
* scrollAmount:1,//步长
* scrollDelay:20//时长
*/
(function($){
$.fn.kxbdMarquee = function(options){
var opts = $.extend({},$.fn.kxbdMarquee.defaults, options);
return this.each(function(){
var $marquee = $(this);//滚动元素容器
var _scrollObj = $marquee.get(0);//滚动元素容器DOM
var scrollW = $marquee.width();//滚动元素容器的宽度
var scrollH = $marquee.height();//滚动元素容器的高度
var $element = $marquee.children(); //滚动元素
var $kids = $element.children();//滚动子元素
var scrollSize=0;//滚动元素尺寸
var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型，1左右，0上下
//防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
$element.css(_type?'width':'height',10000);
//获取滚动元素的尺寸
if (opts.isEqual) {
scrollSize = $kids[_type?'outerWidth':'outerHeight']() * $kids.length;
}else{
$kids.each(function(){
scrollSize += $(this)[_type?'outerWidth':'outerHeight']();
});
}
//滚动元素总尺寸小于容器尺寸，不滚动
if (scrollSize<(_type?scrollW:scrollH)) return;
//克隆滚动子元素将其插入到滚动元素后，并设定滚动元素宽度
$element.append($kids.clone()).css(_type?'width':'height',scrollSize*2);
var numMoved = 0;
function scrollFunc(){
var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';
if (opts.loop > 0) {
numMoved+=opts.scrollAmount;
if(numMoved>scrollSize*opts.loop){
_scrollObj[_dir] = 0;
return clearInterval(moveId);
}
}
if(opts.direction == 'left' || opts.direction == 'up'){
_scrollObj[_dir] +=opts.scrollAmount;
if(_scrollObj[_dir]>=scrollSize){
_scrollObj[_dir] = 0;
}
}else{
_scrollObj[_dir] -=opts.scrollAmount;
if(_scrollObj[_dir]<=0){
_scrollObj[_dir] = scrollSize;
}
}
}
//滚动开始
var moveId = setInterval(scrollFunc, opts.scrollDelay);
//鼠标划过停止滚动
$marquee.hover(
function(){
clearInterval(moveId);
},
function(){
clearInterval(moveId);
moveId = setInterval(scrollFunc, opts.scrollDelay);
}
);
});
};
$.fn.kxbdMarquee.defaults = {
isEqual:true,//所有滚动的元素长宽是否相等,true,false
loop: 0,//循环滚动次数，0时无限
direction: 'left',//滚动方向，'left','right','up','down'
scrollAmount:1,//步长
scrollDelay:20//时长
};
$.fn.kxbdMarquee.setDefaults = function(settings) {
$.extend( $.fn.kxbdMarquee.defaults, settings );
};
})(jQuery);
调用页面 展示
<!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>kxbdMarquee - 模拟Marquee无缝滚动</title>
<meta name="generator" content="Aptana" />
<meta name="author" content="Aken Li@www.kxbd.com" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
* {margin:0;padding:0;}
body { font-size:12px;}
a {color:#333;}
ul {list-style:none;}
#marquee1 {position:absolute;top:80px;left:50px;width:310px;height:45px;overflow:hidden;background:#333;border:2px solid #333;}
#marquee1 ul li {float:left; padding:0 1px;}
#marquee1 ul li img {display:block;}
#marquee2 {position:absolute;top:80px;left:400px;width:300px;height:25px;overflow:hidden; background:#EFEFEF;}
#marquee2 ul li {float:left; padding:0 10px; line-height:25px;}
#marquee3 {position:absolute;top:150px;left:50px;width:60px;height:235px;overflow:hidden;background:#333;border:2px solid #333;}
#marquee3 ul li {float:left; padding:1px 0;}
#marquee3 ul li img {display:block;}
#marquee4 {position:absolute;top:150px;left:400px;width:200px;height:200px; overflow:hidden;background:#EFEFEF;}
#marquee4 ul li {float:left; width:180px; padding:10px; line-height:20px;}
</style>
<script type="text/javascript" src="../scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="kxbdMarquee.js"></script>
<script type="text/javascript">
$(function(){
$('#marquee1').kxbdMarquee({direction:'right'});
$('#marquee2').kxbdMarquee({isEqual:false});
$('#marquee3').kxbdMarquee({direction:'down'});
$('#marquee4').kxbdMarquee({direction:'up',isEqual:false});
});
</script>
</head>
<body>
<div id="marquee1">
<ul>
<li><img src="../images/01s.jpg" width="60" height="45" /></li>
<li><img src="../images/02s.jpg" width="60" height="45" /></li>
<li><img src="../images/03s.jpg" width="60" height="45" /></li>
<li><img src="../images/04s.jpg" width="60" height="45" /></li>
<li><img src="../images/05s.jpg" width="60" height="45" /></li>
<li><img src="../images/06s.jpg" width="60" height="45" /></li>
<li><img src="../images/07s.jpg" width="60" height="45" /></li>
<li><img src="../images/08s.jpg" width="60" height="45" /></li>
</ul>
</div>
<div id="marquee2">
<ul>
<li><a href="#">新闻公告一</a></li>
<li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二</a></li>
<li><a href="#">新闻公告三新闻公告三</a></li>
<li><a href="#">新闻公告四新闻公告四新闻公告四</a></li>
<li><a href="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li>
<li><a href="#">新闻公告六新闻公告六新闻公告六</a></li>
</ul>
</div>
<div id="marquee3">
<ul>
<li><img src="../images/01s.jpg" width="60" height="45" /></li>
<li><img src="../images/02s.jpg" width="60" height="45" /></li>
<li><img src="../images/03s.jpg" width="60" height="45" /></li>
<li><img src="../images/04s.jpg" width="60" height="45" /></li>
<li><img src="../images/05s.jpg" width="60" height="45" /></li>
<li><img src="../images/06s.jpg" width="60" height="45" /></li>
<li><img src="../images/07s.jpg" width="60" height="45" /></li>
<li><img src="../images/08s.jpg" width="60" height="45" /></li>
</ul>
</div>
<div id="marquee4">
<ul>
<li><a href="#">新闻公告一新闻公告一</a></li>
<li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二</a></li>
<li><a href="#">新闻公告三新闻公告三新闻公告三新闻公告三</a></li>
<li><a href="#">新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四</a></li>
<li><a href="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li>
<li><a href="#">新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六</a></li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
jQuery 模拟 Marquee 无缝滚动 不间断滚动
MARQUEE属性与用法，能实现无缝循环滚动文字，上下，左右都可以
主要介绍了jQuery模拟Marquee实现无缝滚动效果,结合完整实例形式分析了jQuery针对图片与文字的无缝滚动效果实现技巧,需要的朋友可以参考下
jQuery 模仿 Marquee 间歇式 无缝滚动 不间断滚动
网站中公告上下无缝滚动，marquee，要求每条广告的内容高度一致，如果想改成高度不一致的无缝滚动，联系我，我再发给你，懒得一批。
marquee一款非常NB的插件可以实现无缝滚动上下左右都可以。使用简单操作容易
jquery.marquee.js官方下载jquery.marquee.js官方下载
用javascript模拟marquee实现滚动
marquee无缝隙循环 向左 向右 近日研究marquee无缝隙循环，有些心得 因为是初学JS 所以从网上找了不少别人的例子 我发现了一下问题 1.大多数html代码不符合W3C的最新标准。 2.很多代码移植性太差。 3.向左循环的...
jquery.marquee.js可实现多个滚动效果 并且兼容各大主流浏览器
Marquee.js插件提供了许多属性选项，您可以配置定制外观和效果。 { yScroll: "top" // 初始滚动方向 ...loop: -1 // 设置循环滚动次数 （-1为无限循环） fxEasingShow: "swing" // 缓冲效果 fxEasingScroll: "linear
liMarquee 是一款基于 jQuery 的无缝滚动插件，类似于 HTML 的 Marquee 标签，但比 Marquee 更强大。它可以应用于任何 Web 元素，同时它可以设置不同的滚动方向（左右上下）、滚动速度、鼠标悬停暂停、鼠标拖动、...
实现图片文字，向左，向右，向上，向下无缝滚动，适合广告图片展示 浏览器兼容(IE、FF、Opera、NS、MYIE)
主要介绍了基于jQuery实现一个marquee无缝滚动的插件,非常不错，具有参考借鉴价值，需要的朋友可以参考下
jQuery实现网站中公告上下无缝滚动，marquee（每条广告之间的高度无需一致），自己的坑自己来填了，这个和我以前上传的一样，但是广告的每条高度不需要一致，更加灵活
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画，制作文字的上下左右移动效果。
无缝循环marquee滚动JS代码实现，兼容IE, FireFox, Chrome，供大家参考，具体内容如下 首先是CSS和HTML如下: #marquee_zxd { border: 1px solid red; white-space: nowrap; overflow: hidden; width: 500px; ...
div+css+javascript 实现无缝滚动,marquee无缝滚动，无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果（仅IE）： 代码如下: <marquee behavior=”scroll” contenteditable=”true” xss=removed ...