Phiên bản đầy đủ: jsB@nk » Con trỏ » Di chuyển theo chuột » Các chú thỏ theo chuột
URL: https://www.javascriptbank.com/easter-cursor-trailer-easter-cursor-trailer-2.html
Hiệu ứng làm cho hình ảnh các chú thỏ di chuyển theo chuột, khi chuột di chuyển thì các chú thỏ dãn ra, khi chuột đứng yên thì các chú thỏ co lại.
Phiên bản đầy đủ: jsB@nk » Con trỏ » Di chuyển theo chuột » Các chú thỏ theo chuột
URL: https://www.javascriptbank.com/easter-cursor-trailer-easter-cursor-trailer-2.html
<script>var step=8 var stepbasic=8var numberofimages=8var spacebetweenimgs=30var x,y,x_oldvar flag=0var pagewidthvar pageheightvar xpos=new Array()var ns6=document.getElementById&&!document.all?1:0for (i=0;i<=8;i++) {xpos[i]=-100}var ypos=new Array()for (i=0;i<=numberofimages;i++) {ypos[i]=-100}function handlerMM(e) {x = (document.layers || ns6) ? e.pageX : document.body.scrollLeft+event.clientXy = (document.layers || ns6) ? e.pageY : document.body.scrollTop+event.clientYflag=1}function initiatetracker() {if (document.all) {pageheight=document.body.clientHeight-30 pagewidth=document.body.clientWidth-30for (i=0; i<numberofimages; i++) { var thisspan=eval("span"+(i)+".style")thisspan.posLeft=xpos[i]thisspan.posTop=ypos[i] thisspan.visibility="visible" }makesnake()} if (ns6) { pageheight=window.innerHeight-30 pagewidth=window.innerWidth-30for (i=0; i<numberofimages; i++) {document.getElementById("span"+i).style.left=xpos[i]document.getElementById("span"+i).style.top=ypos[i] document.getElementById("span"+i).style.visibility="visible" }makesnake()}if (document.layers) {pageheight=window.innerHeight-30 pagewidth=window.innerWidth-30for (i=0; i<numberofimages; i++) { var thisspan=eval("document.span"+i)thisspan.left=xpos[i]thisspan.top=ypos[i]thisspan.visibility="visible"}x_old=x makesnake()}}function makesnake() { if (x_old==x) {spacebetweenimgs--}else {spacebetweenimgs+=5}if (spacebetweenimgs>=30) {spacebetweenimgs=30}if (spacebetweenimgs<=0) {spacebetweenimgs=0}if (flag==1 && document.all) { for (i=numberofimages; i>=1; i--) { xpos[i]=xpos[i-1]+spacebetweenimgsypos[i]=ypos[i-1]}xpos[0]=x+stepbasicypos[0]=yfor (i=0; i<numberofimages; i++) { var thisspan = eval("span"+(i)+".style")if (xpos[i]>pagewidth) {xpos[i]=-2000}thisspan.posLeft=xpos[i]thisspan.posTop=ypos[i] }} if (flag==1 && ns6) { for (i=numberofimages; i>=1; i--) { xpos[i]=xpos[i-1]+spacebetweenimgsypos[i]=ypos[i-1] }xpos[0]=x+stepbasicypos[0]=yfor (i=0; i<numberofimages; i++) {if (xpos[i]>pagewidth) {xpos[i]=-2000} document.getElementById("span"+i).style.left=xpos[i]document.getElementById("span"+i).style.top=ypos[i] }}else if (flag==1 && document.layers) { for (i=numberofimages; i>=1; i--) { xpos[i]=xpos[i-1]+spacebetweenimgsypos[i]=ypos[i-1] }xpos[0]=x+stepbasicypos[0]=yfor (i=0; i<numberofimages; i++) {if (xpos[i]>pagewidth) {xpos[i]=-2000} var thisspan = eval("document.span"+i) thisspan.left=xpos[i]thisspan.top=ypos[i] }}x_old=xvar timer=setTimeout("makesnake()",30)}if (document.layers){document.captureEvents(Event.MOUSEMOVE);}document.onmousemove=handlerMM;window.onload=initiatetracker</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="span0" style="position:absolute;visibility:hidden;overflow:hidden"> <img src="hase.gif" width="24" height="45"></div><div id="span1" style="position:absolute;visibility:hidden;;overflow:hidden"> <img src="hase.gif" width="24" height="45"></div><div id="span2" style="position:absolute;visibility:hidden;;overflow:hidden"> <img src="hase.gif" width="24" height="45"></div><div id="span3" style="position:absolute;visibility:hidden;;overflow:hidden"> <img src="hase.gif" width="24" height="45"></div><div id="span4" style="position:absolute;visibility:hidden;;overflow:hidden"> <img src="hase.gif" width="24" height="45"></div><div id="span5" style="position:absolute;visibility:hidden;;overflow:hidden"> <img src="hase.gif" width="24" height="45"></div><div id="span6" style="position:absolute;visibility:hidden;;overflow:hidden"> <img src="hase.gif" width="24" height="45"></div><div id="span7" style="position:absolute;visibility:hidden;;overflow:hidden"> <img src="hase.gif" width="24" height="45"></div><div id="span8" style="position:absolute;visibility:hidden;;overflow:hidden"> <img src="hase.gif" width="24" height="45"></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/mouse/Easter_Cursor_Trailer/hase.gif