跟隨鼠標的心

2024-09-05 12:22:23

字體：大中小

來源：轉載

供稿：網友

一款鼠標效果，鼠標跟隨，跟隨鼠標的心，鼠標晃動，會看到心形的拖影，挺漂亮的效果，你可以把心形的圖片重新制作一下，一共需要制作5個心形圖片，替換掉代碼中的圖片，這樣效果會更好。

<html><head><title>跟隨鼠標的心</title><script LANGUAGE="JavaScript" FPTYPE="dynamicanimation">dynamicanimAttr = "dynamicanimation"  animateElements = new Array()  currentElement = 0  speed = 0  stepsZoom = 8  stepsWord = 8  stepsFly = 12  stepsSpiral = 16  steps = stepsZoom  step = 0  outString = ""  function dynAnimation()   {      var ms = navigator.appVersion.indexOf("MSIE")      ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)  if(!ie4)      {         if((navigator.appName == "Netscape") &&(parseInt(navigator.appVersion.substring(0, 1)) >= 4))    {     for (index=document.layers.length-1; index >= 0; index--)              {       layer=document.layers[index]                   if (layer.left==10000)                       layer.left=0              }          }         return      }      for (index=document.all.length-1; index >= document.body.sourceIndex; index--)       {          el = document.all[index]          animation = el.getAttribute(dynamicanimAttr, false)          if(null != animation)          {             if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")       {                 ih = el.innerHTML                 outString = ""                 i1 = 0                 iend = ih.length                 while(true)                  {                     i2 = startWord(ih, i1)                     if(i2 == -1)                       i2 = iend                    outWord(ih, i1, i2, false, "")                     if(i2 == iend)                        break                     i1 = i2                     i2 = endWord(ih, i1)                     if(i2 == -1)                       i2 = iend                     outWord(ih, i1, i2, true, animation)                  if(i2 == iend)          break                     i1 = i2                  }                 document.all[index].innerHTML = outString                 document.all[index].style.posLeft = 0       document.all[index].setAttribute(dynamicanimAttr, null)              }             if(animation == "zoomIn" || animation == "zoomOut")              {       ih = el.innerHTML       outString = "<SPAN " + dynamicanimAttr + "=/"" + animation + "/" style=/"position: relative; left: 10000;/">"       outString += ih        outString += "</SPAN>"        document.all[index].innerHTML = outString       document.all[index].style.posLeft = 0       document.all[index].setAttribute(dynamicanimAttr, null)      }    }      }      i = 0      for (index=document.body.sourceIndex; index < document.all.length; index++)    {    el = document.all[index]    animation = el.getAttribute(dynamicanimAttr, false)    if (null != animation)     {      if(animation == "flyLeft")       {        el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth        el.style.posTop = 0       }      else if(animation == "flyRight")       {        el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth        el.style.posTop = 0       }      else if(animation == "flyTop" || animation == "dropWord")               {        el.style.posLeft = 0        el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight       }      else if(animation == "flyBottom")       {        el.style.posLeft = 0        el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight       }      else if(animation == "flyTopLeft")       {        el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth        el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight       }      else if(animation == "flyTopRight" || animation == "flyTopRightWord")       {        el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth        el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight       }      else if(animation == "flyBottomLeft")       {        el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth        el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight       }      else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")       {        el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth        el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight       }      else if(animation == "spiral")       {        el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth        el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight       }      else if(animation == "zoomIn")       {        el.style.posLeft = 10000        el.style.posTop = 0       }      else if(animation == "zoomOut")       {        el.style.posLeft = 10000        el.style.posTop = 0       }      else       {        el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth        el.style.posTop = 0       }      el.initLeft = el.style.posLeft      el.initTop = el.style.posTop      animateElements[i++] = el     }    }   window.setTimeout("animate();", speed)   }function offsetLeft(el) {  x = el.offsetLeft  for (e = el.offsetParent; e; e = e.offsetParent)   x += e.offsetLeft;  return x   }function offsetTop(el) {  y = el.offsetTop  for (e = el.offsetParent; e; e = e.offsetParent)  y += e.offsetTop;  return y }function startWord(ih, i) {  for(tag = false; i < ih.length; i++)   {    c = ih.charAt(i)    if(c == '<')     tag = true    if(!tag)     return i    if(c == '>')     tag = false    }    return -1   }  function endWord(ih, i)   {  nonSpace = false  space = false  while(i < ih.length)   {    c = ih.charAt(i)    if(c != ' ')     nonSpace = true    if(nonSpace && c == ' ')     space = true    if(c == '<')     return i    if(space && c != ' ')     return i    i++   }  return -1 }function outWord(ih, i1, i2, dyn, anim) {  if(dyn)   outString += "<SPAN " + dynamicanimAttr + "=/"" + anim + "/" style=/"position: relative; left: 10000;/">"  outString += ih.substring(i1, i2)  if(dyn)   outString += "</SPAN>"   }function animate() {  el = animateElements[currentElement]  animation = el.getAttribute(dynamicanimAttr, false)  step++  if(animation == "spiral")   {    steps = stepsSpiral    v = step/steps    rf = 1.0 - v     t = v * 2.0*Math.PI    rx = Math.max(Math.abs(el.initLeft), 200)    ry = Math.max(Math.abs(el.initTop),  200)    el.style.posLeft = Math.ceil(-rf*Math.cos(t)*rx)    el.style.posTop  = Math.ceil(-rf*Math.sin(t)*ry)   }  else if(animation == "zoomIn")   {    steps = stepsZoom    el.style.fontSize = Math.ceil(50+50*step/steps) + "%"    el.style.posLeft = 0    }    else if(animation == "zoomOut")     {      steps = stepsZoom      el.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%"      el.style.posLeft = 0     }    else     {      steps = stepsFly      if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")       steps = stepsWord      dl = el.initLeft / steps      dt = el.initTop  / steps      el.style.posLeft = el.style.posLeft - dl      el.style.posTop = el.style.posTop - dt     }    if (step >= steps)     {      el.style.posLeft = 0      el.style.posTop = 0            currentElement++      step = 0     }    if(currentElement < animateElements.length)    window.setTimeout("animate();", speed)     }//--></script></head><body onLoad="dynAnimation()" background=BG.JPG><br><br><br><br><br><br><font size="4"><br></font><center>  <font face="文鼎琥珀繁" size="4" color="#CC0099"> 曾經有一段珍貴的感情放在我的面前，我沒有好好珍惜，世界最后悔的事莫過于此。如果上天再給我一次機會，我會說：“我愛你”，如果非要給這個愛加一個限期的話，我希望是一萬年！</font> </center><p dynamicanimation="dropWord" style="position: relative !important; left: 10000 !important">　</p><div   class="70qarhlowxag"   id="trailSprite1" style="position: absolute; height:36px; width:36px;z-index: 100; left: 600px; top: 5px; visibility: hidden"><dd dynamicanimation="flyTopRightWord" style="position: relative !important; left: 10000 !important">  <img src="/d/file/p/2024/09-05/f889b210ef483320ccfd311f9cf216f5.gif" name="trailSprite1img" WIDTH="36" HEIGHT="36"> </dd></div><div   class="70qarhlowxag"   id="trailSprite2" style="position: absolute; height:36px; width:36px;z-index: 10; left: 600px; top: 5px; visibility: hidden"><dd><img src="/d/file/p/2024/09-05/bade6bf5e5b9c3dc7e95f79aa08539ca.gif" name="trailSprite2img" WIDTH="36" HEIGHT="36"> </dd></div><div   class="70qarhlowxag"   id="trailSprite3" style="position: absolute; height:36px; width:36px;z-index: 10; left: 600px; top: 5px; visibility: hidden"><dd><img src="/d/file/p/2024/09-05/1c66c9bf206a0a3d53b32a238b9295ef.gif" name="trailSprite3img" WIDTH="36" HEIGHT="36"> </dd></div><div   class="70qarhlowxag"   id="trailSprite4" style="position: absolute; height:36px; width:36px;z-index: 10; left: 600px; top: 5px; visibility: hidden"><dd><img src="/d/file/p/2024/09-05/880c08a4e49a37c1d79566f943e3bbbd.gif" name="trailSprite4img" WIDTH="36" HEIGHT="36"> </dd></div><div   class="70qarhlowxag"   id="trailSprite5" style="position: absolute; height:36px; width:36px;z-index: 10; left: 600px; top: 5px; visibility: hidden"><dd><img src="/d/file/p/2024/09-05/7820b09f3a96061e3958cf8106a33525.gif" name="trailSprite5img" WIDTH="36" HEIGHT="36"> </dd></div></body></html><script>var isNS = (navigator.appName == "Netscape");layerRef = (isNS) ? "document" : "document.all";styleRef = (isNS) ? "" : ".style";var queue = new Array();var NUM_OF_TRAIL_PARTS = 5for (x=1; x < 6; x++) { ///////////////Image Preloadeval("trailSpriteFrame" + x + " = new Image(36,36);");eval("trailSpriteFrame" + x + ".src = '/jscss/demoimg/201204/heart" + x + ".gif';"); }function trailSpriteObj(anID) {this.trailSpriteID = "trailSprite" + anID; //as before this.imgRef = "trailSprite" + anID + "img"; //reference to the sprites image namethis.currentFrame = 1; //the varible for looking after the framethis.animateTrailSprite = animateTrailSprite; //declare the objects method cycle}function animateTrailSprite() {if (this.currentFrame <6 ) { //if there are animation frames left, the change sprites the current frameif (isNS) { //Detect the browser and perform coresponding image switcheval("document." + this.trailSpriteID +".document['"+ this.imgRef + "'].src = trailSpriteFrame" + this.currentFrame + ".src");} else {eval("document['" + this.imgRef + "'].src = trailSpriteFrame" + this.currentFrame + ".src");}this.currentFrame ++; //and increase the objects current frame } else { //the current frame has reached its limit so hide the spriteeval(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 ;");eval("document." + currentObj + ".top = e.pageY + 10;");} else {eval("document.all." + currentObj + ".style.pixelLeft = event.clientX + document.body.scrollLeft - 10 ;");eval("document.all." + currentObj + ".style.pixelTop = event.clientY + document.body.scrollTop + 10;");}}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; //reset the objects frame number & make the sprite visible againeval(layerRef + '.' + queue[0].trailSpriteID + styleRef + '.visibility = "visible"'); return queue[0].trailSpriteID;}function init() {for(x=0; x<NUM_OF_TRAIL_PARTS; x++) //fill array with trail objectsqueue[x] = new trailSpriteObj(x+1) ;if (isNS) { document.captureEvents(Event.MOUSEMOVE); }document.onmousemove = processMouse;setInterval("processAnim();",25);} window.onload = init;</script>

上一篇：鼠標拖動寫字，網頁特效

下一篇：圖片跟隨鼠標并快速旋轉圍繞的JS代碼