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程序设计有所帮助。