本文實例講述了js實現精美的圖片跟隨鼠標效果實現方法。分享給大家供大家參考。具體實現方法如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 <html> <head> <meta http-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=new Array("trail1.gif",38,35,"trail2.gif",30,31,"trail3.gif",28,26,"trail4.gif",22,21,"trail5.gif",16,16,"trail6.gif",10,10) var offsetx=15 var offsety=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,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+"border=0>") } function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){ with (document){ write((!A && !B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+"style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; "); if(St){ if (C) write(" style='"); write(St+";' ") } else write((A || B)?"'":""); write((At)? At+">" : ">"); write((HT) ? HT : ""); if (!Op) closeContainer(N) } } function closeContainer(){ document.write((A || B)?"</div>":"</layer>") } function getXpos(N){ if (A) return parseInt(document.getElementById(N).style.left) else if (B) return parseInt(B[N].style.left) else return C[N].left } function getYpos(N){ if (A) return parseInt(document.getElementById(N).style.top) else if (B) return parseInt(B[N].style.top) else return C[N].top } function moveContainer(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); } function cycle(){ //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))) } } function newPos(e){ moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2) } function getedgesIE(){ 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程序設計有所幫助。