具体可见示例：模拟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的"animate"函数来实现这一点。具体地，使用".animate...
基于jQuery实现的marquee无缝滚动插件，能够扩展jQuery的功能，为网页添加动态的滚动效果。 知识点二：marquee元素 marquee元素是HTML中的一个标签，用于创建自动滚动的文本或图片区域。在早期的网页设计中，...
**jQuery无缝滚动**是一种网页设计技术，用于实现图片或内容的自动循环播放效果，从而提升用户体验，增加网站的视觉吸引力。这种技术基于JavaScript库jQuery，它简化了DOM操作，使得创建动态、交互式的网页变得更加...
在提供的文件名列表中，我们看到一个名为 `marquee.js` 的文件，这很可能就是实现无缝滚动效果的JavaScript代码。在实际应用中，`marquee.js` 可能包含了以下关键部分： 1. **初始化函数**：这个函数通常会在页面...
但是，如果仍然需要实现类似的效果，我们可以使用JavaScript来模拟这个行为，同时增加更多的定制功能，比如无缝滚动。 在给定的代码片段中，我们看到HTML结构主要包含一个ID为`announcement`的`<div>`，内部有一个`...
无缝滚动是一种网页元素展示方式，通过JavaScript来控制内容如图片、文字等以循环、不间断的方式移动，模拟出一种无边界的滚动效果。这种效果在许多现代网站设计中被广泛采用，可以提高用户体验，吸引用户的注意力。...
实现无缝滚动的核心在于JavaScript和jQuery的使用。在jQuery插件中，我们可以通过控制`ul`元素的`margin`属性来模拟滚动效果。如果选择横向滚动，我们调整`margin-left`；如果是纵向滚动，我们调整`margin-top`。...
在网页设计中，动态效果...总结，jQuery的文字滚动效果主要通过`animate()`函数和CSS属性配合实现，而跑马灯效果则通过控制滚动位置和时间间隔来达到循环滚动的效果。掌握这些技术，能让你的网页增添更多生动和互动性。
13.jquery黑色循环滚动菜单特效插件下载 14.jquery灰色简洁风格横向三级网站导航菜单 15.jquery简洁动感支持三级的黑色导航菜单 16.jquery类似TAB一样的动感菜单下载 17.jquery绿色动感滑动下拉多级导航...
跑马灯效果通过不断滚动文本，使原本无法全部显示的内容得以在视觉上无缝循环，增加了信息的传递效率。 实现文字跑马灯效果有多种技术手段，主要包括HTML、CSS和JavaScript。以下将详细讲解这些方法： 1. **HTML**...
这段代码将元素内容包裹在div中，然后通过`animate`方法模拟滚动效果。 4. jQuery插件 为了简化开发，有许多jQuery插件如jQuery Marquee提供更高级的功能。只需引入插件，然后调用相应的函数即可实现跑马灯。 5....