JavaScript實現的鼠標跟隨特效示例【2則實例】

更新時間：2018年12月22日 09:50:53 作者：huansky

這篇文章主要介紹了JavaScript實現的鼠標跟隨特效,結合2則實例形式分析了javascript針對鼠標事件的響應、計算、處理及頁面元素動態(tài)操作相關實現技巧,需要的朋友可以參考下

本文實例講述了JavaScript實現的鼠標跟隨特效。分享給大家供大家參考，具體如下：

鼠標是現在電腦的基本配置之一，也是最常用的輸入命令的工具之一。本文將將一些與鼠標有關系的特效。

1、跟隨鼠標移動的彩色星星

如題，會根據鼠標的移動而移動，并在鼠標周圍隨機來回移動，讓人感覺在放大縮小。根據書上的代碼做了一些修改。比如，如果用戶不移動鼠標，是不會顯示星星效果的：其次就是將源代碼中的亮度調節(jié)等去掉了，因為效果并不是很明顯。截了三幅圖，黑點近似代表鼠標的位置。效果圖如下：

源代碼：

<html>
<head>
 <title>
  Twinkle stars
 </title>
 <style>
  .iestars{
   position:absolute;
   top:00px; left:00px;
   height:50px;
   width:50px;
   padding-top:15px;
   text-align:center;
   display:none;
  }
 </style>
</head>
<body>
 <script language = "JavaScript">
  //數組保存星星的顏色，也可以設置為其它顏色，也可以增加或減少顏色數量
  var colours=new Array('ff0000','00ff00','0000ff','ff00ff','00ffff','ffff00');
  var amount=colours.length;
  //初始化參數
  var Ydelay=0,Xdelay=0;  //圓環(huán)中心的位置
  var step=0.2;
  var currStep=0;
  var my=0,mx=0;  //記錄鼠標當前位置
  var flag=0;
  //在容器中寫入"."字符，閃爍的星星即是從"."變化而來的
  for (i=0; i < amount; i++){
   document.write('<div class = "iestars" >...</div>');
  }
  //處理鼠標事件
  function iMouse(){
   my = event.y;
   mx = event.x;
   //第一次初始化，只運行一次
   if (flag==0){
    delay();
    flag=1;
   }
  }
  document.onmousemove = iMouse;
  var iestars=document.getElementsByClassName("iestars");
  function stars(){
   for(i = 0;i < amount;i++){
    var style = iestars[i].style;  //訪問每個容器的style屬性
    style.color=colours[i];
    style.display="block";
    style.top = Ydelay+80*Math.sin(currStep/2+i*3.1416/3)*Math.sin((currStep)/10);  //豎直位置
    style.left = Xdelay+80*Math.cos(currStep/2+i*3.1416/3)*Math.sin((currStep)/10);  //水平位置
   }
   currStep += step;
  }
  //計算圓環(huán)中心的位置，為當前圓環(huán)中心位置和鼠標位置的加權平均
  function delay(){
   Ydelay += (my-Ydelay)*1/20;
   Xdelay += (mx-Xdelay)*1/20;
   stars();
   setTimeout('delay()',10);
  }
 </script>
</body>
</html>

2、水中鼠標特效

鼠標上方不斷地冒出氣泡，這些氣泡在上升中不斷搖晃，慢慢的變大，直到消失在窗口。

效果圖：

源代碼：

<html>
<head>
<meta charset="utf-8">
 <title>
  Water Bubbles
 </title>
 <style>
 .center{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid yellow;
    width: 220px;
    height: 42px;
    padding: 10px;
    z-index: 3;
   }
   img{
    position:absolute;
    top:0px;
    left:0px;
    filter:alpha(opacity=40);
   }
 </style>
</head>
<body>
<div id="low">
</div>
<div class="center">
eret
<a href="#" rel="external nofollow" >erte</a>
rt<p>rtdfffffffffff</p>
</div>
</body>
<script language="JavaScript">
  var bubble={
    imgsrc : "img/1.gif",
    Amount : 15,
    my : 10,   //初始位置
    mx : 10,   //初始位置
    Ypos : [], //y數組，記錄圖片的位置
    Xpos : [], //x數組
    Speed :[], //上升速度
    size : [], //范圍
    sizegrow :[],  //增長速度
    angle :[], //余弦曲線的角度
    anglegrow :[], //每次余弦曲線角度變化
    img:"",
  }
  //鼠標事件
  document.onmousemove=MouseMove;
  function MouseMove(){
   bubble.my = event.y-20;
   bubble.mx = event.x;
  }
  //初始化數據
  for (i = 0; i < bubble.Amount; i++){
   bubble.Ypos[i] = bubble.my-20;
   bubble.Xpos[i] = bubble.mx;
   bubble.Speed[i] = Math.random()*1+3;  //速度在[1,4)
   bubble.angle[i] = 0;
   bubble.anglegrow[i] = Math.random()*0.5+0.1;  //角度變換[0.2,0.6)
   bubble.size[i] = 8;
   bubble.sizegrow[i] = Math.random()*1+2;  //尺寸變換[0.5,0.6)
  }
  for (i = 0; i < bubble.Amount; i++){
   bubble.img+='<img class="si" src="' + bubble.imgsrc + '" >';
  }
  var low=document.getElementById("low");
  low.innerHTML=bubble.img;
  var si=document.getElementsByTagName("img");
  //創(chuàng)建冒泡程序
  function MouseBubbles(){
     for (var i = 0; i < bubble.Amount; i++){
      bubble.Ypos[i] += bubble.Speed[i] * (-1)
      bubble.Xpos[i] += bubble.Speed[i] * Math.cos(bubble.angle[i]); ;
       if(bubble.Ypos[i]<-25){//當到達最上方后，重新初始化
        bubble.Ypos[i] = bubble.my;
        bubble.Xpos[i] = bubble.mx;
        bubble.Speed[i] = Math.random() * 4 + 1;
        bubble.size[i] = 8;  //初始尺寸，上限25
       }
    console.log(si[i]+" "+i);
      si[i].style.left = bubble.Xpos[i];  //左右變化
      si[i].style.top = bubble.Ypos[i] ;
      si[i].style.width = bubble.size[i];  //改變尺寸
      si[i].style.height = bubble.size[i];
      console.log(bubble.Ypos[i]);//組四行放懷
      bubble.size[i] += bubble.sizegrow[i];
      bubble.angle[i] += bubble.anglegrow[i];
      if (bubble.size[i] > 24) bubble.size[i] = 25;
     }
      setTimeout('MouseBubbles()', 15);
 }
 MouseBubbles();
 </script>
</html>

PS：感興趣的朋友還可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun 測試上述代碼，看看運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: