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使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
Laravel 5 学习笔记
2015/03/06 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python 列表理解及使用方法
2017/10/27 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
日语求职信范文
2013/12/17 职场文书
教学大赛获奖感言
2014/01/15 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
家教广告词
2014/03/19 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
教务处教学工作总结
2015/08/10 职场文书
python实现简单聊天功能
2021/07/07 Python
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python