用一个样例来讲述javascript插件的开发过程,虽然工作中更多的使用JQuery,但是原生js基础仍然很重要。 功能说明:一幅长长的画卷,按照一定的速度,或垂直,或水平循环滚动,在指定位置暂停X秒,鼠标进入停止,可以用按钮控制。 可以控制的属性: direction: 方向水平or垂直 stop_time: 暂停时间 hover_control: 鼠标进入是否停止 stop_position: 暂停位置(px) id:滚动体的id container:滚动体容器的id
var scroll={
container:"content",
id: "box",
dirction:"marginTop",
stop_time:3000,
hover_control:"on",
stop_position:[330, 660]
}
var scroll_module = (function(){
var container = document.getElementById(scroll.container);
var scroll_part = document.getElementById(scroll.id);
var divheight= scroll_part.offsetHeight
var part2 = scroll_part.cloneNode(true);
container.appendChild(part2);
var martop = parseInt(scroll_part.style.marginTop || 0 )
var hoverover = false;
var go = function(){
martop = martop - 2;
scroll_part.style.marginTop = martop + "px";
timer = setTimeout(go , 5);
for (var i=0,j=i+1;i<scroll.stop_position.length+1;i++){
if (martop <=-divheight){
martop = 0;
clearTimeout(timer);
setTimeout(function(){
go()
},scroll.stop_time)
}
else if (martop== -scroll.stop_position[i]){
clearTimeout(timer);
if(hoverover == false){
setTimeout(function(){
go()
},scroll.stop_time)
}
}
}
}
var hoveron = function(){
scroll_part.onmouseover=function(){
hoverover = true;
alert(hoverover)
}
scroll_part.onmouseout=function(){
go();
hoverover = false;
alert(hoverover)
}
}
return {
go : go,
hoveron : hoveron
}
})()
scroll_module.go();
scroll_module.hoveron();