jquery 上下滚动广告

2016-02-19 15:58 8 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享jquery 上下滚动广告的教程,热爱PS的朋友们快点看过来吧!

【 tulaoshi.com - Web开发 】

代码如下:
(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();

来源:http://www.tulaoshi.com/n/20160219/1610777.html

延伸阅读
标签: Web开发
代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / style !-- /* css for data grid*/ .datagrid { width: 100%; back...
标签: Web开发
Div上下居中-www.51windows.Net 我站在中央了center 我站在中央了center [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
标签: Web开发
程序代码 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" / title滚动新闻类...
标签: Web开发
这是以前整理的一些代码,与JQer分享,希望对大家能有些帮助。 话说功能愈发强大的JQuery体积也不再小巧,55k(Minified)的大小虽然不能说很大,但如果用在一些小型项目或网站上,也不算小,那么我们何不根据自己项目特点,简化或改写JQuery呢,Follow me! 首先是JQuery的核心代码:代码: //不完全一致,但实现手段大致如此 (function(){ &n...
标签: Web开发
首先,jQuery 是什么? jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等。 jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是WRITE LESS,DO MORE,写更少的代码,做更多的事情。 有什么作用? 它是轻量级的js库(压缩...

经验教程

111

收藏

22

精华推荐

jquery全选,jquery全不选,jquery反选

jquery全选,jquery全不选,jquery反选

小熙415

js滚动效果

js滚动效果

幸福搬搬搬

jquery团队发布jquery 1.4

jquery团队发布jquery 1.4

致美焕颜微整形

微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部