jquery 上下滚动广告

 更新时间:2009年06月17日 22:32:37   作者:  
jquery 上下滚动广告实现代码,大家可以自行测试,需要加载jquery类库
复制代码 代码如下:

(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();

相关文章

  • JQuery实现表格中相同单元格合并示例代码

    JQuery实现表格中相同单元格合并示例代码

    一定要注意如果从list的开始元素循环下去,remove掉一个元素后,有些元素就找不到了或者说不是要找的那个元素,感兴趣的各位可以研究下哈
    2013-06-06
  • jQuery点击出现爱心特效

    jQuery点击出现爱心特效

    这篇文章主要为大家详细介绍了jQuery点击出现爱心特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • jquery对ajax的支持介绍

    jquery对ajax的支持介绍

    本文为大家介绍下jquery对ajax的支持性,感兴趣的朋友可以了解下
    2013-12-12
  • 解决jquery的ajax调取后端数据成功却渲染失败的问题

    解决jquery的ajax调取后端数据成功却渲染失败的问题

    今天小编就为大家分享一篇解决jquery的ajax调取后端数据成功却渲染失败的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • jquery调取json数据实现省市级联的方法

    jquery调取json数据实现省市级联的方法

    这篇文章主要介绍了jquery调取json数据实现省市级联的方法,可实现读取json数据绑定到下拉菜单的功能,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • jQuery实现上传图片前预览效果功能

    jQuery实现上传图片前预览效果功能

    这篇文章主要为大家详细介绍了jQuery实现上传图片前预览效果功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • jQuery实现的调整表格行tr上下顺序

    jQuery实现的调整表格行tr上下顺序

    表格元素是大家比较常用的元素,有时候表格中的行需要调整顺序,下面通过代码实例介绍一下如何利用jquery实现此功能
    2016-01-01
  • 解决jquery1.9不支持browser对象的问题

    解决jquery1.9不支持browser对象的问题

    项目里面一直用的都是jquery1.9,不支持browser对象,百度一下,找到了解决方案在此与大家分享下,有遇到此问题的朋友不要错过
    2013-11-11
  • JS与jQuery实现隔行变色的方法

    JS与jQuery实现隔行变色的方法

    这篇文章主要介绍了JS与jQuery实现隔行变色的方法,结合实例形式对比分析了javascript与jQuery实现隔行变色的具体操作步骤与相关技巧,体验一下jQuery的华丽与简洁,需要的朋友可以参考下
    2016-09-09
  • jQuery 改变CSS样式基础代码

    jQuery 改变CSS样式基础代码

    jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性。
    2010-02-02

最新评论