一个js特效滚动广告播放器

最新推荐文章于 2021-03-04 13:29:20 发布

hero4u

最新推荐文章于 2021-03-04 13:29:20 发布

阅读量1.7k

点赞数 1

文章标签： function div class mootools go html

本文链接：https://blog.csdn.net/hero4u/article/details/1567976

版权

呵呵，这个是使用mootools类库实现的特效了，mootools也是基于prototype.js发展起来的个性特效类库了。一开始觉得效果很玄，后来才发现，完成的plugin插件实现特效数量有限，于是就自己硬着头皮开发了一个，用了两天时候，头皮都磨破了
mootools 下载带注释版的有146K大小，压缩版pack ver 只有36.7k大小。学习的时候可以使用full，上传到web的时候可以使用pack
mootorial 这是mootool的客户端教程，很详细的哦。其实有很多方法和prototype差不多的了。就当作是ajax入门吧
可惜的是csdn,没有运行代码可以调试了
shifter.js

// JavaScript Document

var shifter = new Class( {

getOptions: function(){

return {

onChange: Class.empty,

onComplete: Class.empty,

onTick: function(pos){

this.knob.setStyle(this.p, pos+'px');

steps: 100

};

initialize: function(el, options){

previousBtn=$("prev-button");

nextBtn=$("next-button");

pauseBtn=$("pause-button");

//获取前一个按钮，下一个按钮，已经暂停按钮，分别绑定 leftClick rightClick toggle开关事件

this.playState = true;

//设置自动播放

this.nodes = el.getElementsByTagName("div");

this.steps = this.nodes[0].getStyle('width').toInt();

//获取步长值

this.leng = this.nodes.length-1;

//获取滚动的次数

this.count = 0;

//计数器，计算已经滚动多少次了

this.isRight = true;

//方向是否向右

this.elements = el;

var shifter_copy = new Element("div");

var shifter_left = new Element("div");

shifter_copy.addClass("shifter");

shifter_left.addClass("shifter-left");

shifter_copy.innerHTML = el.innerHTML;

shifter_left.innerHTML = el.innerHTML;

shifter_copy.injectAfter(el);

shifter_left.injectBefore(el);

//首先初始化了前后两个对象，以方便左右滚动，如果一开始时向左滚动的话，那么左边可能没有元素，所以需要

//shifter-left来弥补一下

nextBtn.addEvent('click',this.rightClick.bind(this));

previousBtn.addEvent('click',this.leftClick.bind(this));

pauseBtn.addEvent('click',this.toggle.bind(this));

go:function(index)

{

parent = this.elements.getParent();

if(index<-this.leng||index>this.leng)

{

this.count=index=0;

parent.setStyle('margin-left', '0px');

}

originLeft = parent.getStyle("margin-left");

if(this.isRight)

{

destinLeft = originLeft.toInt() - this.steps + "px";

this.count--;

}

else

{

destinLeft = originLeft.toInt() + this.steps + "px";

this.count++;

}

this.myFx = new Fx.Style(parent, 'margin-left');

this.myFx.start(originLeft,destinLeft);

start:function() {

if (this.playState) {

me = this;

this.timer = window.setInterval(function(){me.go(me.count);},3000);

}

toggle:function() {

me = this;

if (!this.playState) {

me.go(me.count);

this.timer = window.setInterval(function(){me.go(me.count);},3000);

//pauseBtn.innerHTML.replace(/off./g,'on.');

}

else{

$clear(this.timer);

//pauseBtn.innerHTML.replace(/on./g,'off.');

}

this.playState = (this.playState)?false:true;

rightClick:function()

{

$clear(this.timer);

this.playState = false;

this.isRight = true;

//pauseBtn.innerHTML.replace(/on./g,'off.'); //把图片从暂定转换成播放,pause-off表示播放,pause-on暂停

this.go(this.count);

leftClick:function()

{

$clear(this.timer);

this.playState = false;

this.isRight = false;

//pauseBtn.innerHTML.replace(/on./g,'off.'); //把图片从暂定转换成播放,pause-off表示播放,pause-on暂停

this.go(this.count);

}

} );

这里是html部分

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head >

< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />

< title > 新闻滚动 </ title >

< style type ="text/css" >

/* <![CDATA[ */

{

margin:0;

padding:0;

}

html,body

{

height:100%;

width:100%;

}

.clearBoth

{

clear:both;

}

div.layout

{

width:600px;

overflow:hidden;

/*overflow:auto;*/

}

.shifter-wrapper

{

width:4000px;

}

div.shifter,div.shifter-left

{

width:2000px;

height:130px;

float:left;

overflow:hidden;

background:#AAAAAA;

}

div.shifter-left

{

margin-left:-2000px;

}

div.blocksub

{

width:200px;

height:100%;

float:left;

background:#FFFFCC;

}

/* ]]> */

</ style >

< script type ="text/javascript" src ="../mootools/mootools.v1.00.js" ></ script >

< script type ="text/javascript" src ="js/shifter.js" ></ script >

</ head >

< body >

< div class ="layout" id ="layout" >

< div class ="shifter-wrapper" id ="shifter-wrapper" >

< div id ="shifter" class ="shifter" >

< div class ="blocksub" id ="block1" >< a href ="#block6" > 1 </ a ></ div >

< div class ="blocksub" >< a href ="#block7" > 2 </ a ></ div >

< div class ="blocksub" >< a href ="#block8" > 3 </ a ></ div >

< div class ="blocksub" >< a href ="#block9" > 4 </ a ></ div >

< div class ="blocksub" >< a href ="#block10" > 5 </ a ></ div >

< div class ="blocksub" >< a href ="#block1" > 6 </ a ></ div >

< div class ="blocksub" >< a href ="#block2" > 7 </ a ></ div >

< div class ="blocksub" >< a href ="#block3" > 8 </ a ></ div >

< div class ="blocksub" >< a href ="#block4" > 9 </ a ></ div >

< div class ="blocksub" >< a href ="#block5" > 10 </ a ></ div >

</ div >

<!-- <a href="#" οnclick="go(0);return false;">1</a>

< a href ="#" id ="prev-button" class ="prev-button" onclick ="return false;" > 上一个 </ a >

< a href ="#" id ="pause-button" class ="pause-button" onclick ="return false;" > 暂停|播放 </ a >

< a href ="#" id ="next-button" class ="next-button" onclick ="return false;" > 下一个 </ a >

< script type ="text/javascript" >

/* <![CDATA[ */

/*var myad = new shifter($('shifter'));

window.addEvent('domready', function(){

myad.start();

});*/

/* ]]> */

</ script >

</ body >

</ html >

shifter_pack.js

hero4u

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个js特效滚动广告播放器

呵呵，这个是使用mootools类库实现的特效了，mootools也是基于prototype.js发展起来的个性特效类库了。一开始觉得效果很玄，后来才发现，完成的plugin插件实现特效数量有限，于是就自己硬着头皮开发了一个，用了两天时候，头皮都磨破了mootools 下载带注释版的有146K大小，压缩版pack ver 只有36.7k大小。学习的时候可以使用full，上传到web的时候可以使用p
复制链接

扫一扫