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 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
微信小程序实现多张图片上传功能
Nov 18 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
学习php笔记 字符串处理
2010/10/19 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
php商品对比功能代码分享
2015/09/24 PHP
php获取excel文件数据
2017/04/21 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
js中function()使用方法
2013/12/24 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
DOM和JQuery对象有什么区别
2016/11/11 面试题
心得体会怎么写
2013/12/30 职场文书
运动会广播稿100字
2014/01/11 职场文书
学校评语大全
2014/05/06 职场文书
师范生求职信
2014/06/14 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript