昨天在页面的时候 要用到滚动新闻效果,想用jquery 做,于是google了下, 找到下面这么一串插件, 用的时候发现有问题, 就是这个插件不能重用就是不能调用两次,不然就会出现数据异常, 请教了下笨笨哥 , 说有个函数闭包问题, 一开始我还是不太懂什么是函数闭包, 然后搜索了下,发现关于函数闭包的问题 网上说的蛮少的, 简单的说就是 函数里面套函数, 然后产生变量 调用混乱的现象. 飞鱼:这个东东,蛮复杂,我再琢磨几下,然后再分享给大伙.^_^
$.fn.extend({
Scroll:function(opt,callback){
//参数初始化
if(!opt) var opt={};
var _this=this.eq(0).find("ul:first");
var line=opt.line?parseInt(opt.line,10):1, //每次滚动的行数，默认为一行
speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度，数值越大，速度越慢（毫秒）
timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
if(line<=0) line=1;
var upHeight=0;
//滚动函数
getUp=function(){
up=0;
for(i=0;i<line;i++){
up += _this.find('li:eq('+i+')').height();
}
up = 0-up;
return up;
}
scrollUp=function(){
upHeight = getUp();
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
});
}
//鼠标事件绑定
_this.hover(function(){
clearInterval(timerID);
},function(){
timerID=setInterval("scrollUp()",timer);
}).mouseout();
}
})
})(jQuery);
然后 慷慨的老哥 给我编了个扩展, 相当牛逼, 我还么有仔细分析过这个代码, 但是用起来非常好用,比预期的好.
代码如下:
(function($) {
$.fn.scroll = function(options) {
options = options || {};
this.css('overflow', 'hidden');
var scroll = (function(self) {
return function() {
if (self.data('scroll_stop')) {
return;
}
var li = self.find('li:first');
var t = parseInt(li.css('marginTop')) || 0;
li.animate({
'marginTop': (t - li.outerHeight()) + 'px'
}, options.speed || 'slow', function() {
self.append(li);
li.css('marginTop', t + 'px');
});
};
})(this);
setInterval(scroll, options.delay || 3000);
this.hover(function() {
$(this).data('scroll_stop', true);
}, function() {
$(this).removeData('scroll_stop');
});
};
})(jQuery);
使用方法是: 把上面的代码载入到页面然后用下面的代码调用.
$('id').scroll(); //常用 可调参数 有speed:速度; delay:滚动时间
目前是1.0版本, 实现效果还不错,主要是可以自动判断当前:first 的高度 自动调整. 解决了其他滚动js 时,因为 高度问题产生的抖动现象.
之后打算加些其他功能, 如 : 滚动多行
=====2009年5月11日更新======
飞鱼：演示地址
PS: 老哥 不是做程序员 真浪费丫“` 跑去开淘宝店
给大家介绍下 他的 淘宝店 吧“ 杭州包包专卖
哟？不错哎 订阅飞鱼的RSS Feeds 回去慢慢看^_^
您可能还对这些日志感兴趣
最新在啃
该文章已经被摸了1,297次。 共有 7 条评论
遗传，你们家有遗传
回复
飞鱼 Reply:
March 18th, 2009 at 9:10
嘎嘎~~~ 那我老爹`怎么就不懂乜~~
他只知道电脑就是游戏机
回复
如果要同时滚动几条怎么办？
回复
喜欢看教程 =w= 尤其是比较菜鸟的 ！呵呵~ 通过搜索来的!hehe~ 以后常来！嘻嘻
回复
飞鱼 Reply:
September 14th, 2009 at 21:53
^_^ 我是超级菜鸟~
回复
用了这个插件，谢谢了:)
回复
你好，我想使用你这个插件，但是我也用的DEDE，里面有个PIC_SCOLL.JS的文件貌似会起冲突。如何可以把需要的那段脱离出来？
回复
发表评论