js实现精美的图片跟随鼠标效果实例

时间：2021-05-26

本文实例讲述了js实现精美的图片跟随鼠标效果实现方法。分享给大家供大家参考。具体实现方法如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>精美js鼠标跟随代码</title></head><body><script> A=document.getElementByIdB=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=10nos=parseInt(T1.length/3)rate=50ie5fix1=0;ie5fix2=0;rightedge=B? document.body.clientWidth-T1[1] : window.innerWidth-T1[1]-20bottomedge=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)elsereturn C[N].left}function getYpos(N){if (A)return parseInt(document.getElementById(N).style.top)else if (B)return parseInt(B[N].style.top)elsereturn 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]-20bottomedge=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=getedgesIEwindow.onresize=getedgesIE}if(document.layers)document.captureEvents(Event.MOUSEMOVE)document.onmousemove=newPossetInterval("cycle()",rate)</script></body></html>

希望本文所述对大家的javascript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章