jquery 上下滚动广告


Posted in Javascript onJune 17, 2009
(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();

Javascript 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
论JavaScript模块化编程
Mar 07 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
jQuery Ajax文件上传(php)
Jun 16 #Javascript
JavaScript 高级语法介绍
Jun 15 #Javascript
JavaScript 撑出页面文字换行
Jun 15 #Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 #Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 #Javascript
FireFox JavaScript全局Event对象
Jun 14 #Javascript
Javascript 错误处理的几种方法
Jun 13 #Javascript
You might like
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
PHP新手入门学习方法
2011/05/08 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
Python2.7读取PDF文件的方法示例
2017/07/13 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
什么是Remote Module
2016/06/10 面试题
学生实习自我鉴定
2013/10/11 职场文书
音乐系毕业生自荐信
2013/10/27 职场文书
怎样客观的做好自我评价
2013/12/28 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
如何写自我鉴定
2014/03/19 职场文书
预防煤气中毒方案
2014/06/16 职场文书
信用卡工资证明格式
2014/09/13 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
sql中mod()函数取余数的用法
2021/05/29 SQL Server
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python