js implementation of exquisite picture following mouse effect example

js implementation of exquisite picture following mouse effect example_javascript skills

WBOY

Release： 2016-05-16 15:58:46

Original

956 people have browsed it

The example in this article describes how to implement beautiful pictures following the mouse effect in js. Share it with everyone for your reference. The specific implementation method is as follows:

<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&#63; document.body.clientWidth-T1[1] : window.innerWidth-T1[1]-20
bottomedge=B&#63; 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) &#63; "<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)&#63;"'":"");
write((At)&#63; At+">" : ">");
write((HT) &#63; HT : "");
if (!Op)
closeContainer(N)
}
}
function closeContainer(){
document.write((A || B)&#63;"</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)&#63; document.getElementById(N).style : (B)&#63; B[N].style : (C)&#63; 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)&#63;event.clientX+ie5fix1:e.pageX+2,(B)&#63;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>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.