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 isArray 数组类型检测函数
Oct 08 Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
vuex实现购物车功能
Jun 28 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 咖啡文化
用header 发送cookie的php代码
2007/03/16 PHP
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
php生成略缩图代码
2012/07/16 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
Python中常用的内置方法
2019/01/28 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
德购商城:德国进口直邮商城
2017/06/13 全球购物
《猴子种果树》教学反思
2014/04/26 职场文书
老公保证书范文
2014/04/29 职场文书
防沙治沙典型材料
2014/05/07 职场文书
2014年教研员工作总结
2014/12/23 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js