js实现精美的图片跟随鼠标效果实例
本文实例讲述了js实现精美的图片跟随鼠标效果实现方法。分享给大家供大家参考。具体实现方法如下：
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>精美js鼠标跟随代码</title>
</head>
<body>
<script>
A=document.getElementById
B=document.all;
C=document.layers;
T1=newArray("trail1.gif",38,35,"trail2.gif",30,31,"trail3.gif",28,26,"trail4.gif",22,21,"trail5.gif",16,16,"trail6.gif",10,10)
varoffsetx=15
varoffsety=10
nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
rightedge=B?document.body.clientWidth-T1[1]:window.innerWidth-T1[1]-20
bottomedge=B?document.body.scrollTop+document.body.clientHeight-T1[2]:window.pageYOffset+window.innerHeight-T1[2]
for(i=0;i<nos;i++){
createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<imgsrc='"+T1[i*3]+"'width="+T1[(i*3+1)]+"height="+T1[(i*3+2)]+"border=0>")
}
functioncreateContainer(N,Xp,Yp,W,H,At,HT,Op,St){
with(document){
write((!A&&!B)?"<layerid='"+N+"'left="+Xp+"top="+Yp+"width="+W+"height="+H:"<divid='"+N+"'"+"style='position:absolute;left:"+Xp+";top:"+Yp+";width:"+W+";height:"+H+";");
if(St){
if(C)
write("style='");
write(St+";'")
}
elsewrite((A||B)?"'":"");
write((At)?At+">":">");
write((HT)?HT:"");
if(!Op)
closeContainer(N)
}
}
functioncloseContainer(){
document.write((A||B)?"</div>":"</layer>")
}
functiongetXpos(N){
if(A)
returnparseInt(document.getElementById(N).style.left)
elseif(B)
returnparseInt(B[N].style.left)
else
returnC[N].left
}
functiongetYpos(N){
if(A)
returnparseInt(document.getElementById(N).style.top)
elseif(B)
returnparseInt(B[N].style.top)
else
returnC[N].top
}
functionmoveContainer(N,DX,DY){
c=(A)?document.getElementById(N).style:(B)?B[N].style:(C)?C[N]:"";
if(!B){
rightedge=window.innerWidth-T1[1]-20
bottomedge=window.pageYOffset+window.innerHeight-T1[2]
}
c.left=Math.min(rightedge,DX+offsetx);
c.top=Math.min(bottomedge,DY+offsety);
}
functioncycle(){
//if(IE5)
if(document.all&&window.print){
ie5fix1=document.body.scrollLeft;
ie5fix2=document.body.scrollTop;
}
for(i=0;i<(nos-1);i++){
moveContainer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1)))
}
}
functionnewPos(e){
moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2)
}
functiongetedgesIE(){
rightedge=document.body.clientWidth-T1[1]
bottomedge=document.body.scrollHeight-T1[2]
}
if(B){
window.onload=getedgesIE
window.onresize=getedgesIE
}
if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=newPos
setInterval("cycle()",rate)
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。