js-Implementierung eines exquisiten Bildes, das dem Mauseffekt folgt example

js-Implementierung eines exquisiten Bildes, das dem Mauseffekt folgt example_javascript skills

WBOY

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

Original

957 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie man schöne Bilder nach dem Mauseffekt in js umsetzt. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

<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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.