网页制作动态代码.docx
- 文档编号：30475814
- 上传时间：2023-08-15
- 格式：DOCX
- 页数：56
- 大小：31.44KB
网页制作动态代码.docx
《网页制作动态代码.docx》由会员分享，可在线阅读，更多相关《网页制作动态代码.docx（56页珍藏版）》请在冰豆网上搜索。
网页制作动态代码
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
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&&!
（oCpareDocumentPosition（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 fun.call（this,this._list[i],（this.Showtext? this._text[i]: null）,i）; } }; #idGlideView{ height: 314px; width: 325px; margin: 0auto; } #idGlideViewdiv{ width: 325px; height: 314px; }
#006699;">
#FF9933;">