首页 新闻 搜索 专区 学院

jquery 模拟marquee无缝滚动

0
悬赏园豆:10 [已解决问题] 解决于 2011-05-09 14:06
View Code
(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);

这是js文件

function loadNews() {
var num = Math.random();
$(
"#marquee").html("")
$.getJSON(
"../Ashx/LoadNews.ashx?r=" + num + "&key=Load", function (data) {
var content = "<ul>";
$.each(data,
function (i, n) {
if (n.IsAffiche == 1) {
content
+= "<li onmousemove=\"show(" + n.NewsId + ")\" onmouseleave=\"hide(" + n.NewsId + ")\" style=\"cursor: hand;\"><a onclick=\"NewsDetail('" + n.NewsId + "','Detail')\">" + n.NewsTitle + "-" + n.CreateTime + "</a><div id=\"div" + n.NewsId + "\" style=\"display:none;float:right\"><a onclick=\"NewsDetail('" + n.NewsId + "','Detail')\">查看</a> <a onclick=\"NewsDetail('" + n.NewsId + "','Edit')\">编辑</a> <a onclick=\"DeleteNew('" + n.NewsId + "')\">删除</a></div></li>";
}
else {
content
+= "<li style=\"cursor: hand;\" onclick=\"NewsDetail('" + n.NewsId + "','Detail')\">" + n.NewsTitle + "-" + n.CreateTime + "</li>";
}
});
content
+= "</ul>";
$(
"#marquee").html(content)
$(
'#marquee').kxbdMarquee({ direction: 'up', isEqual: false });
});
}

这是在页面上调用 它已经实现了无缝滚动,由于里面的内容是不断更新的 所以loadNews()这个方法没隔1秒调用一次 可没调用一次它的滚动速度就加快一定时间 最后变的很快很快 这是什么原因 望哪位大大指教一下

_____昆的主页 _____昆 | 菜鸟二级 | 园豆:204
提问于:2011-04-29 17:48
< >
分享
最佳答案
0

原因很简单,你每次调用之后,都会再次添加一个setInterval,最后导致几个setInterval并发执行了,所以速度很快,你需要在调用的时候clearInterval上次的setInterval

收获园豆:10
Lecaf | 菜鸟二级 |园豆:352 | 2011-05-05 10:25
其他回答(2)
0

gfhghgh

三皮觉罗 | 园豆:205 (菜鸟二级) | 2011-04-30 02:48
0

kxbdMarquee这个函数怎么能放在$.getJSON里,里面有调用setInterval,不能放在$.getJSON里

爱研究源码的javaer | 园豆:930 (小虾三级) | 2011-04-30 22:20
是一样的啊 把kxbdMarquee放到$.getJSON外面也是一样的 每执行一次定时刷新它的速度就加快一点 能否给个实例 数据是动态加载的 所以要隔一段时间刷新一次
支持(0) 反对(0) _____昆 | 园豆:204 (菜鸟二级) | 2011-05-03 09:23
我用$.ajax这个方法也不行
支持(0) 反对(0) _____昆 | 园豆:204 (菜鸟二级) | 2011-05-03 09:33
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册