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的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
vue中锚点的三种方法
Jul 06 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
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 Mysql编程之高级技巧
2008/08/27 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
PyQt5实现类似别踩白块游戏
2019/01/24 Python
Python发展简史 Python来历
2019/05/14 Python
python实现简单俄罗斯方块
2020/03/13 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
什么是事务?为什么需要事务?
2012/01/09 面试题
机械制造专业个人的自我评价
2013/12/28 职场文书
公司授权委托书样本
2014/09/15 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python