跟随鼠标的心

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<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 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="//ku.shouce.ren/files/images/201601/56a36d425e4cb.gif" name="trailSprite1img" WIDTH="36" HEIGHT="36"> </dd>
</div>
<div id="trailSprite2" style="position: absolute; height:36px; width:36px;z-index: 10; left: 600px; top: 5px; visibility: hidden">
<dd><img src="//ku.shouce.ren/files/images/201601/56a36d43215b9.gif" name="trailSprite2img" WIDTH="36" HEIGHT="36"> </dd>
</div>
<div id="trailSprite3" style="position: absolute; height:36px; width:36px;z-index: 10; left: 600px; top: 5px; visibility: hidden">
<dd><img src="//ku.shouce.ren/files/images/201601/56a36d43dd0cc.gif" name="trailSprite3img" WIDTH="36" HEIGHT="36"> </dd>
</div>
<div id="trailSprite4" style="position: absolute; height:36px; width:36px;z-index: 10; left: 600px; top: 5px; visibility: hidden">
<dd><img src="//ku.shouce.ren/files/images/201601/56a36d4471f2a.gif" name="trailSprite4img" WIDTH="36" HEIGHT="36"> </dd>
</div>
<div id="trailSprite5" style="position: absolute; height:36px; width:36px;z-index: 10; left: 600px; top: 5px; visibility: hidden">
<dd><img src="//ku.shouce.ren/files/images/201601/56a36d455336b.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 = 5
for (x=1; x < 6; x++) { ///////////////Image Preload
eval("trailSpriteFrame" + x + " = new Image(36,36);");
eval("trailSpriteFrame" + x + ".src = '//ku.shouce.ren/files/images/201601/56a36d4630973.gif';"); 
}

function trailSpriteObj(anID) {
this.trailSpriteID = "trailSprite" + anID; //as before 
this.imgRef = "trailSprite" + anID + "img"; //reference to the sprites image name
this.currentFrame = 1; //the varible for looking after the frame
this.animateTrailSprite = animateTrailSprite; //declare the objects method cycle
}

function processAnim() {
for(x=0; x < NUM_OF_TRAIL_PARTS; x++)
queue[x].animateTrailSprite();
}

​x
 
<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 = ""  

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...xxxxxxxxxx
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

跟随鼠标的心

分类

鼠标特效

描述

一款鼠标效果，鼠标跟随，跟随鼠标的心，鼠标晃动，会看到心形的拖影，挺漂亮的效果，你可以把心形的图片重新制作一下，一共需要制作5个心形图片，替换掉代码中的图片，这样效果会更好。