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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
node后端服务保活的实现
Nov 10 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
php三元运算符知识汇总
2015/07/02 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python 深入理解yield
2008/09/06 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android