JavaScript实现图片DIV竖向滑动的方法
本文实例讲述了JavaScript实现图片DIV竖向滑动的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"><head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>图片滑动展示效果</title>
<scripttype="text/javascript">
var$$=function(id){
return"string"==typeofid?document.getElementById(id):id;
};
functionEvent(e){
varoEvent=document.all?window.event:e;
if(document.all){
if(oEvent.type=="mouseout"){
oEvent.relatedTarget=oEvent.toElement;
}elseif(oEvent.type=="mouseover"){
oEvent.relatedTarget=oEvent.fromElement;
}
}
returnoEvent;
}
functionaddEventHandler(oTarget,sEventType,fnHandler){
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType,fnHandler,false);
}elseif(oTarget.attachEvent){
oTarget.attachEvent("on"+sEventType,fnHandler);
}else{
oTarget["on"+sEventType]=fnHandler;
}
};
varClass={
create:function(){
returnfunction(){
this.initialize.apply(this,arguments);
}
}
}
Object.extend=function(destination,source){
for(varpropertyinsource){
destination[property]=source[property];
}
returndestination;
}
varGlideView=Class.create();
GlideView.prototype={
//容器对象容器宽度展示标签展示宽度
initialize:function(obj,iHeight,sTag,iMaxHeight,options){
varoContainer=$$(obj),oThis=this,len=0;
this.SetOptions(options);
this.Step=Math.abs(this.options.Step);
this.Time=Math.abs(this.options.Time);
this._list=oContainer.getElementsByTagName(sTag);
len=this._list.length;
this._count=len;
this._height=parseInt(iHeight/len);
this._height_max=parseInt(iMaxHeight);
this._height_min=parseInt((iHeight-this._height_max)/(len-1));
this._timer=null;
this.Each(function(oList,oText,i){
oList._target=this._height*i;//自定义一个属性放目标left
oList.style.top=oList._target+"px";
oList.style.position="absolute";
addEventHandler(oList,"mouseover",function(){oThis.Set.call(oThis,i);});
})
//容器样式设置
oContainer.style.height=iHeight+"px";
oContainer.style.overflow="hidden";
oContainer.style.position="relative";
//移出容器时返回默认状态
addEventHandler(oContainer,"mouseout",function(e){
//变通防止执行oList的mouseout
varo=Event(e).relatedTarget;
if(oContainer.contains?!oContainer.contains(o):oContainer!=o&&!(oContainer.compareDocumentPosition(o)&16))oThis.Set.call(oThis,-1);
})
},
//设置默认属性
SetOptions:function(options){
this.options={//默认值
Step:20,//滑动变化率
Time:3,//滑动延时
TextTag:"",//说明容器tag
TextHeight:0//说明容器高度
};
Object.extend(this.options,options||{});
},
//相关设置
Set:function(index){
if(index<0){
//鼠标移出容器返回默认状态
this.Each(function(oList,oText,i){oList._target=this._height*i;if(oText){oText._target=this._height_text;}})
}else{
//鼠标移到某个滑动对象上
this.Each(function(oList,oText,i){
oList._target=(i<=index)?this._height_min*i:this._height_min*(i-1)+this._height_max;
if(oText){oText._target=(i==index)?0:this._height_text;}
})
}
this.Move();
},
//移动
Move:function(){
clearTimeout(this._timer);
varbFinish=true;//是否全部到达目标地址
this.Each(function(oList,oText,i){
variNow=parseInt(oList.style.top),iStep=this.GetStep(oList._target,iNow);
if(iStep!=0){bFinish=false;oList.style.top=(iNow+iStep)+"px";}
})
//未到达目标继续移动
if(!bFinish){varoThis=this;this._timer=setTimeout(function(){oThis.Move();},this.Time);}
},
//获取步长
GetStep:function(iTarget,iNow){
variStep=(iTarget-iNow)/this.Step;
if(iStep==0)return0;
if(Math.abs(iStep)<1)return(iStep>0?1:-1);
returniStep;
},
Each:function(fun){
for(vari=0;i<this._count;i++)
fun.call(this,this._list[i],(this.Showtext?this._text[i]:null),i);
}
};
</script>
<styletype="text/css">
#idGlideView{
height:314px;
width:325px;
margin:0auto;
}
#idGlideViewdiv{
width:325px;
height:314px;
}
</style>
</head>
<body>
<divid="idGlideView">
<divstyle="background-color:#006699;">鼠标移到这里试试看！</div>
<divstyle="background-color:#FF9933;">鼠标移到这里试试看！</div>
</div>
<div>https://www.nhooo.com/</div>
<SCRIPT>
vargv=newGlideView("idGlideView",314,"div",280,"");
</SCRIPT>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。