توسط این کد جالب شکلکهای یاهو به دنبال موس حرکت میکنند. این کد بیشتر برای وبلاگهای خاطره و ... به کار میرود.

<!--Powered javascript code by www.irtemes.com & www.takpc.myblog.ir--> <DIV id=dot0 style="VISIBILITY: hidden; WIDTH: 11px; POSITION: absolute; HEIGHT: 11px"><IMG height=11 src="" width=11></DIV> <DIV id=dot1 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px"><I11MG height=30 src="http://i1.tinypic.com/xnd7xk.gif" width=36></DIV> <DIV id=dot2 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px"><IMG height=18 src="http://i3.tinypic.com/xnd89c.gif" width=19></DIV> <DIV id=dot3 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px"><IMG height=18 src="http://i3.tinypic.com/xnd8co.gif" width=19></DIV> <DIV id=dot4 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px"><IMG height=18 src="http://i2.tinypic.com/xnd8ir.gif" width=19></DIV> <DIV id=dot5 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px"><IMG height=18 src="http://i1.tinypic.com/xnd8pz.gif" width=19></DIV> <DIV id=dot6 style="WIDTH: 11px; POSITION: absolute; HEIGHT: 11px"><IMG height=18 src="http://i1.tinypic.com/xnd8vq.gif" width=19></DIV> <SCRIPT language=JavaScript> <!-- hide code /* Elastic Trail script (By Philip Winston @ pwinston@yahoo.com, URL:http://members.xoom.com/ebullets) Script featured on Dynamicdrive.com For this and 100's more DHTML scripts, visit http://dynamicdrive.com */ // Thanks to Troels Jakobsen <tjak@get2net.dk> // for fix which makes it work when the page is scrolled var nDots = 7; if (document.all&&window.print) document.body.style.cssText="overflow-x:hidden;overflow-y:scroll" var Xpos = 0; var Ypos = 0; // fixed time step, no relation to real time var DELTAT = .01; // size of one spring in pixels var SEGLEN = 10; // spring constant, stiffness of springs var SPRINGK = 10; // all the physics is bogus, just picked stuff to // make it look okay var MASS = 1; var GRAVITY = 50; var RESISTANCE = 10; // stopping criterea to prevent endless jittering // doesn't work when sitting on bottom since floor // doesn't push back so acceleration always as big // as gravity var STOPVEL = 0.1; var STOPACC = 0.1; var DOTSIZE = 11; // BOUNCE is percent of velocity retained when // bouncing off a wall var BOUNCE = 0.75; var isNetscape = navigator.appName=="Netscape"; // always on for now, could be played with to // let dots fall to botton, get thrown, etc. var followmouse = true; var dots = new Array(); init(); function init() { var i = 0; for (i = 0; i < nDots; i++) { dots[i] = new dot(i); } if (!isNetscape) { // I only know how to read the locations of the // <LI> items in IE //skip this for now // setInitPositions(dots) } // set their positions for (i = 0; i < nDots; i++) { dots[i].obj.left = dots[i].X; dots[i].obj.top = dots[i].Y; } if (isNetscape) { // start right away since they are positioned // at 0, 0 startanimate(); } else { // let dots sit there for a few seconds // since they're hiding on the real bullets setTimeout("startanimate()", 2000); } } function dot(i) { this.X = Xpos; this.Y = Ypos; this.dx = 0; this.dy = 0; if (isNetscape) { this.obj = eval("document.dot" + i); } else { this.obj = eval("dot" + i + ".style"<img border="0" src="Http://mihanblog.com/Yahoo/3.Gif"> } } function startanimate() { setInterval("animate()", 20); } // This is to line up the bullets with actual LI tags on the page // Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why // Still doesn't work great function setInitPositions(dots) { // initialize dot positions to be on top // of the bullets in the <ul> var startloc = document.all.tags("LI"<img border="0" src="Http://mihanblog.com/Yahoo/3.Gif"> var i = 0; for (i = 0; i < startloc.length && i < (nDots - 1); i++) { dots[i+1].X = startloc[i].offsetLeft startloc[i].offsetParent.offsetLeft - DOTSIZE; dots[i+1].Y = startloc[i].offsetTop + startloc[i].offsetParent.offsetTop + 2*DOTSIZE; } // put 0th dot above 1st (it is hidden) dots[0].X = dots[1].X; dots[0].Y = dots[1].Y - SEGLEN; } // just save mouse position for animate() to use function MoveHandler(e) { Xpos = e.pageX; Ypos = e.pageY; return true; } // just save mouse position for animate() to use function MoveHandlerIE() { Xpos = window.event.x + document.body.scrollLeft; Ypos = window.event.y + document.body.scrollTop; } if (isNetscape) { document.captureEvents(Event.MOUSEMOVE); document.onMouseMove = MoveHandler; } else { document.onmousemove = MoveHandlerIE; } function vec(X, Y) { this.X = X; this.Y = Y; } // adds force in X and Y to spring for dot[i] on dot[j] function springForce(i, j, spring) { var dx = (dots[i].X - dots[j].X); var dy = (dots[i].Y - dots[j].Y); var len = Math.sqrt(dx*dx + dy*dy); if (len > SEGLEN) { var springF = SPRINGK * (len - SEGLEN); spring.X += (dx / len) * springF; spring.Y += (dy / len) * springF; } } function animate() { // dots[0] follows the mouse, // though no dot is drawn there var start = 0; if (followmouse) { dots[0].X = Xpos; dots[0].Y = Ypos; start = 1; } for (i = start ; i < nDots; i++ ) { var spring = new vec(0, 0); if (i > 0) { springForce(i-1, i, spring); } if (i < (nDots - 1)) { springForce(i+1, i, spring); } // air resisitance/friction var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE); // compute new accel, including gravity var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY); // compute new velocity dots[i].dx += (DELTAT * accel.X); dots[i].dy += (DELTAT * accel.Y); // stop dead so it doesn't jitter when nearly still if (Math.abs(dots[i].dx) < STOPVEL && Math.abs(dots[i].dy) < STOPVEL && Math.abs(accel.X) < STOPACC && Math.abs(accel.Y) < STOPACC) { dots[i].dx = 0; dots[i].dy = 0; } // move to new position dots[i].X += dots[i].dx; dots[i].Y += dots[i].dy; // get size of window var height, width; if (isNetscape) { height = window.innerHeight + document.scrollTop; width = window.innerWidth + document.scrollLeft; } else { height = document.body.clientHeight + document.body.scrollTop; width = document.body.clientWidth + document.body.scrollLeft; } // bounce of 3 walls (leave ceiling open) if (dots[i].Y >= height - DOTSIZE - 1) { if (dots[i].dy > 0) { dots[i].dy = BOUNCE * -dots[i].dy; } dots[i].Y = height - DOTSIZE - 1; } if (dots[i].X >= width - DOTSIZE) { if (dots[i].dx > 0) { dots[i].dx = BOUNCE * -dots[i].dx; } dots[i].X = width - DOTSIZE - 1; } if (dots[i].X < 0) { if (dots[i].dx < 0) { dots[i].dx = BOUNCE * -dots[i].dx; } dots[i].X = 0; } // move img to new position dots[i].obj.left = dots[i].X; dots[i].obj.top = dots[i].Y; } } // end code hiding --> </SCRIPT> </body> </html> </body> </html> </body> </html> <!--Powered javascript code by www.irtemes.com & www.takpc.myblog.ir-->

این کد حالتی خاص به اشاره گر موس  در صفحه  میدهد.

<!--Powered javascript code by www.irtemes.com & www.takpc.myblog.ir--> <SCRIPT language="Javascript1.2"> <!-- var isNS = (navigator.appName == "Netscape"<img border="0" src="Http://mihanblog.com/Yahoo/3.Gif"> layerRef = (isNS) ? "document" : "document.all"; styleRef = (isNS) ? "" : ".style"; var queue = new Array(); var NUM_OF_TRAIL_PARTS = 5 for (x=1; x < 6; x++) { eval("trailSpriteFrame" + x + " = new Image(28,36);"<img border="0" src="Http://mihanblog.com/Yahoo/3.Gif"> eval("trailSpriteFrame" + x + ".src = 'trailgif" + x + ".gif';"<img border="0" src="Http://mihanblog.com/Yahoo/3.Gif"> } function trailSpriteObj(anID) { this.trailSpriteID = "trailSprite" + anID; this.imgRef = "trailSprite" + anID + "img"; this.currentFrame = 1; this.animateTrailSprite = animateTrailSprite; } function animateTrailSprite() { if (this.currentFrame <6 ) { if (isNS) { eval("document." + this.trailSpriteID +".document['"+ this.imgRef + "'].src = trailSpriteFrame" + this.currentFrame + ".src"<img border="0" src="Http://mihanblog.com/Yahoo/3.Gif"> } else { eval("document['" + this.imgRef + "'].src = trailSpriteFrame" + this.currentFrame + ".src"<img border="0" src="Http://mihanblog.com/Yahoo/3.Gif"> } this.currentFrame ++; } else { eval(layerRef + '.' + this.trailSpriteID + styleRef + '.visibility = "hidden"'); } } function processAnim() { for(x=0; x < NUM_OF_TRAIL_PARTS; x++) queue[x].animateTrailSprite(); } function processMouse(e) { currentObj = shuffleQueue(); if (isNS) { eval("document." + currentObj + ".left = e.pageX - 10 ;"<img border="0" src="Http://mihanblog.com/Yahoo/3.Gif"> eval("document." + currentObj + ".top = e.pageY + 10;"<img border="0" src="Http://mihanblog.com/Yahoo/3.Gif"> } else { eval("document.all." + currentObj + ".style.pixelLeft = event.clientX + document.body.scrollLeft - 10 ;"<img border="0" src="Http://mihanblog.com/Yahoo/3.Gif"> eval("document.all." + currentObj + ".style.pixelTop = event.clientY + document.body.scrollTop + 10;"<img border="0" src="Http://mihanblog.com/Yahoo/3.Gif"> } } function shuffleQueue() { lastItemPos = queue.length - 1; lastItem = queue[lastItemPos]; for (i = lastItemPos; i>0; i--) queue[i] = queue[i-1]; queue[0] = lastItem; queue[0].currentFrame = 1; eval(layerRef + '.' + queue[0].trailSpriteID + styleRef + '.visibility = "visible"'); return queue[0].trailSpriteID; } function init() { for(x=0; x<NUM_OF_TRAIL_PARTS; x++) queue[x] = new trailSpriteObj(x+1) ; if (isNS) { document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = processMouse; setInterval("processAnim();",25); } if (document.all||document.layers) window.onload = init; //--> </SCRIPT> <DIV id="trailSprite1" style="position: absolute; height:28px; width:36px;z-index: 100"> <img src="blanktrail.gif" height=28 width=36 border=0 name="trailSprite1img"> </DIV> <DIV id="trailSprite2" style="position: absolute; height:28px; width:26px;z-index: 10"> <img src="blanktrail.gif" height=28 width=36 border=0 name="trailSprite2img"> </DIV> <DIV id="trailSprite3" style="position: absolute; height:28px; width:36px;z-index: 10"> <img src="blanktrail.gif" height=28 width=36 border=0 name="trailSprite3img"> </DIV> <DIV id="trailSprite4" style="position: absolute; height:28px; width:36px;z-index: 10"> <img src="blanktrail.gif" height=28 width=36 border=0 name="trailSprite4img"> </DIV> <DIV id="trailSprite5" style="position: absolute; height:28px; width:36px;z-index: 10"> <img src="blanktrail.gif" height=28 width=36 border=0 name="trailSprite5img"> </DIV> <script language="JavaScript1.2"> if (document.all&&window.print) document.body.style.cssText="overflow-x:hidden;overflow-y:scroll" </script><!--Powered javascript code by www.irtemes.com & www.takpc.myblog.ir-->

هدف گیر به دنبال موس 

<!------ http://www.takpc.myblog.ir--------> <style> <!-- #leftright, #topdown{ position:absolute; left:0; top:0; width:1px; height:1px; layer-background-color:red; background-color:red; z-index:100; font-size:1px; } --></style> <div id="leftright" style="width:expression(document.body.clientWidth-2)"> </div> <div id="topdown" style="height:expression(document.body.clientHeight-2)"> </div> <script language="JavaScript1.2"> <!-- if (document.all&&!window.print){ leftright.style.width=document.body.clientWidth-2 topdown.style.height=document.body.clientHeight-2 } else if (document.layers){ document.leftright.clip.width=window.innerWidth document.leftright.clip.height=1 document.topdown.clip.width=1 document.topdown.clip.height=window.innerHeight } function followmouse1(){ //move cross engine for IE 4+ leftright.style.pixelTop=document.body.scrollTop+event.clientY+1 topdown.style.pixelTop=document.body.scrollTop if (event.clientX<document.body.clientWidth-2) topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1 else topdown.style.pixelLeft=document.body.clientWidth-2 } function followmouse2(e){ //move cross engine for NS 4+ document.leftright.top=e.y+1 document.topdown.top=pageYOffset document.topdown.left=e.x+1 } if (document.all) document.onmousemove=followmouse1 else if (document.layers){ window.captureEvents(Event.MOUSEMOVE) window.onmousemove=followmouse2 } function regenerate(){ window.location.reload() } function regenerate2(){ setTimeout("window.onresize=regenerate",400) } if ((document.all&&!window.print)||document.layers) window.onload=regenerate2 //--> </script> <!------ http://www.takpc.myblog.ir-------->

ساعت عقربه دار به دنبال موس 

<!------ http://www.takpc.myblog.ir -------> <script language="JavaScript"> <!-- colors = new Array('#00FFFF','#0000FF');  //Clock face colors. sCol = '#FFFF00';  //seconds colour. mCol = '#8000FF';  //minutes colour. hCol = '#FF0080';  //hours colour. H = 'Hours'; H = H.split(''); H = H.reverse(); M = 'Minutes'; M = M.split(''); M = M.reverse(); S = 'Seconds'; S = S.split(''); S = S.reverse(); dots = 12; var Ypos = 0,Xpos = 0,Ybase = 0,Xbase = 0; var ay = 0, ax = 0, Ay = 0, Ax = 0, by = 0, bx = 0, By = 0, Bx = 0, cy = 0, cx = 0, Cy = 0, Cx = 0, dy = 0, dx = 0, Dy = 0, Dx = 0; count = 0; count_a = 0; move = 1; ns = (document.layers)?1:0; viz = (document.layers)?'hide':'hidden'; if (ns) { for (i = 0; i < dots; i++) document.write('<layer name=nface'+i+' top="0" left="0" clip="0,0,3,3"></layer>'); for (i = 0; i < S.length; i++) document.write('<layer name=nx'+i+' top="0" left="0" width="36" height="36"><font face="Verdana" size="2" color='+sCol+'><center>'+S[i]+'</center></font></layer>'); for (i = 0; i < M.length; i++) document.write('<layer name=ny'+i+' top="0" left="0" width="36" height="36"><font face="Verdana" size="2" color='+mCol+'><center>'+M[i]+'</center></font></layer>'); for (i = 0; i < H.length; i++) document.write('<layer name=nz'+i+' top="0" left="0" width="36" height="36"><font face="Verdana" size="2" color='+hCol+'><center>'+H[i]+'</center></font></layer>'); } else{ document.write('<div id="W" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i = 0; i < dots; i++) { document.write('<div id="face" style="position:absolute;top:0px;left:0px;width:3px;height:3px;font-size:3px;"></div>'); } document.write('</div></div>'); document.write('<div id="X" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i = 0; i < S.length; i++) { document.write('<div id="x" style="position:absolute;width:36px;height:36px;font-family:Verdana;font-size:12px;color:'+sCol+';text-align:center;padding-top:10px">'+S[i]+'</div>'); } document.write('</div></div>') document.write('<div id="Y" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i = 0; i < M.length; i++) { document.write('<div id="y" style="position:absolute;width:36px;height:36px;font-family:Verdana;font-size:12px;color:'+mCol+';text-align:center;padding-top:10px">'+M[i]+'</div>'); } document.write('</div></div>') document.write('<div id="Z" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i = 0; i < H.length; i++) { document.write('<div id="z" style="position:absolute;width:36px;height:36px;font-family:Verdana;font-size:12px;color:'+hCol+';text-align:center;padding-top:10px">'+H[i]+'</div>'); } document.write('</div></div>'); } if (ns) { window.captureEvents(Event.MOUSEMOVE); function nsMouse(evnt) { Ypos = evnt.pageY + 100; Xpos = evnt.pageX + 100; } window.onMouseMove = nsMouse; } else{ function ieMouse() { Ypos = event.y + 100; Xpos = event.x + 100; } document.onmousemove = ieMouse; } function clock() { time = new Date (); secs = time.getSeconds(); sec = -1.57 + Math.PI * secs / 30; mins = time.getMinutes(); min = -1.57 + Math.PI * mins / 30; hr = time.getHours(); hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes()) / 360; Ybase = 15; Xbase = 15; if (ns) { document.layers["nx"+0].visibility = viz; document.layers["ny"+0].visibility = viz; document.layers["nz"+0].visibility = viz; for (i = 0; i < S.length; i++) { document.layers["nx"+i].top = ay - 12 + (i * Ybase) * Math.sin(sec); document.layers["nx"+i].left = ax - 12 + (i * Xbase) * Math.cos(sec); } for (i = 0; i < M.length; i++) { document.layers["ny"+i].top = by - 12 + (i * Ybase) * Math.sin(min); document.layers["ny"+i].left = bx - 12 + (i * Xbase) * Math.cos(min); } for (i = 0; i < H.length; i++) { document.layers["nz"+i].top = cy - 12 + (i * Ybase) * Math.sin(hrs); document.layers["nz"+i].left = cx - 12 + (i * Xbase) * Math.cos(hrs); } for (i = 0; i < dots; ++i) { document.layers["nface"+i].top = dy - 2 + (70 * Math.sin(-0.49+dots+i/1.9)); document.layers["nface"+i].left = dx + 4 + (70 * Math.cos(-0.49+dots+i/1.9));    } } else { var scrll = document.body.scrollTop; W.style.pixelTop = scrll; X.style.pixelTop = scrll; Y.style.pixelTop = scrll; Z.style.pixelTop = scrll; x[0].style.visibility=viz; y[0].style.visibility = viz; z[0].style.visibility = viz; for (i = 0; i < S.length; i++) { x[i].style.pixelTop = ay - 12 + (i * Ybase) * Math.sin(sec); x[i].style.pixelLeft = ax - 12 + (i * Xbase) * Math.cos(sec); } for (i = 0; i < M.length; i++) { y[i].style.pixelTop = by - 12 + (i * Ybase) * Math.sin(min); y[i].style.pixelLeft = bx - 12 + (i * Xbase) * Math.cos(min); } for (i = 0; i < H.length; i++) { z[i].style.pixelTop = cy - 12 + (i * Ybase) * Math.sin(hrs); z[i].style.pixelLeft = cx - 12 + (i * Xbase) * Math.cos(hrs); } for (i = 0; i < dots; ++i) { face[i].style.pixelTop = dy + 6 + (70 * Math.sin(-0.49 + dots + i / 1.9)); face[i].style.pixelLeft = dx + 4 + (70 * Math.cos(-0.49 + dots + i / 1.9));       }    } } function MouseFollow() { ay = Math.round(Ay += ((Ypos) - Ay) * 4 / 15); ax = Math.round(Ax += ((Xpos) - Ax) * 4 / 15); by = Math.round(By += (ay - By) * 4 / 15); bx = Math.round(Bx += (ax - Bx) * 4 / 15); cy = Math.round(Cy += (by - Cy) * 4 / 15); cx = Math.round(Cx += (bx - Cx) * 4 / 15); dy = Math.round(Dy += (cy - Dy) * 4 / 15); dx = Math.round(Dx += (cx - Dx) * 4 / 15); clock(); setTimeout('MouseFollow()',10); } function colorstep() { count +=move; if (count >= dots) {count=0;count_a += move} if (count_a == colors.length) count_a = 0; if (ns) document.layers["nface"+count].bgColor = colors[count_a]; else face[count].style.background = colors[count_a]; setTimeout('colorstep()',100) } function StartAll() { MouseFollow(); colorstep(); } if (document.layers || document.all) window.onload = StartAll; //--> </script> <!------ http://www.takpc.myblog.ir ------->