jquery 上下滚动广告

戴墨镜的猪猪0

戴墨镜的猪猪0

2016-02-19 15:58

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享jquery 上下滚动广告的教程,热爱PS的朋友们快点看过来吧!
代码如下:
(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();

展开更多 50%)
分享

猜你喜欢

jquery 上下滚动广告

Web开发
jquery 上下滚动广告

javascript之循环停顿上下滚动

Web开发
javascript之循环停顿上下滚动

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

基于jquery的超简单上下翻

Web开发
基于jquery的超简单上下翻

Jquery iframe内部出滚动条

Web开发
Jquery iframe内部出滚动条

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

js jquery做的图片连续滚动代码

Web开发
js jquery做的图片连续滚动代码

Flash制作滚动广告图片效果(1)

电脑网络
Flash制作滚动广告图片效果(1)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

java中几个重要的知识细节!

java中几个重要的知识细节!

利用JQuery为搜索栏增加tag提示

利用JQuery为搜索栏增加tag提示
下拉加载更多内容 ↓