首页 新闻 搜索 专区 学院

Jquery无缝滚动

0
悬赏园豆:20 [已解决问题] 解决于 2011-07-27 13:56

我要做几个实时更新的滚动新闻,新闻内容2秒更新一次,可以无缝隙从左向右滚动,该怎么实现呢?

问题补充:

就当数字统计好了,统计某个网站的访问量,访问数字是不断变化的,2秒刷新一次数字。 这些数字是从左到右循环不间断滚动的。

追太阳的向日葵的主页 追太阳的向日葵 | 初学一级 | 园豆:29
提问于:2011-06-23 12:24
< >
分享
最佳答案
0

我经常用的这个挺好用的,给你分享一下吧...哈哈哈

<!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="jquery1.4.2.min.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="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" width="60" height="45" /></li>
<li><img src="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" width="60" height="45" /></li>
<li><img src="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" width="60" height="45" /></li>
<li><img src="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" width="60" height="45" /></li>
<li><img src="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" width="60" height="45" /></li>
<li><img src="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" width="60" height="45" /></li>
<li><img src="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" width="60" height="45" /></li>
<li><img src="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" 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="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" width="60" height="45" /></li>
<li><img src="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" width="60" height="45" /></li>
<li><img src="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" width="60" height="45" /></li>
<li><img src="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" width="60" height="45" /></li>
<li><img src="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" width="60" height="45" /></li>
<li><img src="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" width="60" height="45" /></li>
<li><img src="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" width="60" height="45" /></li>
<li><img src="http://www.phpchina.com/server/avatar.php?uid=85406&size=middle" 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>







/**
* @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);

还有,你可以去网上找找kxbdMarquee.js 这个jquery插件。希望会给你帮助


收获园豆:20
大大的白鲨 | 菜鸟二级 |园豆:209 | 2011-06-23 14:12
其他回答(1)
0

几个实时更新的滚动新闻,新闻是每两秒更新一个。还是换一个呀说清楚呀

三月软件工作室——任忌 | 园豆:524 (小虾三级) | 2011-06-23 13:12
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册