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 相关文章推荐
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
js中键盘事件实例简析
Jan 10 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
jquery validate表单验证插件
Sep 06 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 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
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Python三级菜单的实例
2017/09/13 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
使用pandas读取文件的实现
2019/07/31 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
2014升学宴答谢词
2014/01/26 职场文书
班队活动设计方案
2014/01/30 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript