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代码分享
Mar 25 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 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中Session的概念
2006/10/09 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
让python json encode datetime类型
2010/12/28 Python
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
django实现模型字段动态choice的操作
2020/04/01 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
工程项目经理岗位职责
2013/12/15 职场文书
军训个人总结
2015/03/03 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL