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秒调用一次 可没调用一次它的滚动速度就加快一定时间 最后变的很快很快 这是什么原因 望哪位大大指教一下
最佳答案
0
原因很简单，你每次调用之后，都会再次添加一个setInterval,最后导致几个setInterval并发执行了，所以速度很快，你需要在调用的时候clearInterval上次的setInterval
收获园豆：10
其他回答(2)
0
gfhghgh
0
kxbdMarquee这个函数怎么能放在$.getJSON里，里面有调用setInterval，不能放在$.getJSON里
是一样的啊 把kxbdMarquee放到$.getJSON外面也是一样的 每执行一次定时刷新它的速度就加快一点 能否给个实例 数据是动态加载的 所以要隔一段时间刷新一次
我用$.ajax这个方法也不行
