jquery 上下滚动广告
2009-06-17 00:00
1146 查看
(function($){ $.fn.extend({ rollList:function(option){ option=$.extend({ direction:"up", step:1, time:23 },option); var step_coe,scroll_coe,score_coe; if(option.direction=="up") { step_coe=1; scroll_coe=1; score_coe=1; }else { step_coe=-1; scroll_coe=-1; score_coe=0; } return this.each(function(){ var $this=$(this); var _this=this; var itemHeight; var temp=$("<DIV> </DIV>"); $this.css("overflow","hidden").children() .appendTo(temp); $this.append(temp.clone(true)).append(temp); itemHeight=$this.children(); itemHeight=itemHeight.eq(1).offset().top-itemHeight.eq(0).offset().top; while($this.children(":last").offset().top-$this.offset().top<=$this.height()) $this.append(temp.clone(true)); var roll; this.scrollTop=itemHeight*(1-score_coe); roll=function (){ temp=setInterval(function(){ if(_this.scrollTop*scroll_coe>=itemHeight*score_coe) { _this.scrollTop=(_this.scrollTop-itemHeight)*scroll_coe; } _this.scrollTop+=option.step*step_coe; },option.time); } $this.hover(function(){ clearInterval(temp); },function(){ roll(); }); roll(); }); } }) }(jQuery));
调用如下:
$(elem).rollList();
相关文章推荐
- 一个不错的jquery上下滚动广告展示教程
- 基于jQuery的上下左右无缝滚动应用(单行或多行)
- JQUERY实现可上下滚动的背景图片相册
- 基于jQuery的上下无缝滚动应用(单行或多行)【转】
- Jquery操作div上下浮动滚动
- jQuery实现的无缝广告图片左右滚动功能详解
- jQuery底部带导航的图片切换,定时上下滚动效果(无滚轮切换效果)
- 分享一个JQuery写的点击上下滚动的小例子
- JQuery实现页面企业广告图片切换和新闻列表滚动效果
- 一个jquery写的点击上下滚动的小例子
- jQuery 数据滚动(上下)
- jquery实现文字上下循环滚动效果
- jquery banner广告幻灯片图片轮播切换,模仿实现当当网滚动广告效果
- JQuery实现导航菜单栏随滚动条上下滚动
- Jquery : 上下滚动--单行 批量多行 文字图片翻屏
- jquery图片无缝滚动代码左右 上下无缝滚动图片
- jquery轻松实现li标签上下滚动的原理
- JQuery实现导航效果、新闻滚动、广告效果、横向滚动