快捷導(dǎo)航

JavaScript實現(xiàn)的鼠標(biāo)跟隨特效示例【2則實例】

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

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

本文實例講述了JavaScript實現(xiàn)的鼠標(biāo)跟隨特效。分享給大家供大家參考，具體如下：

鼠標(biāo)是現(xiàn)在電腦的基本配置之一，也是最常用的輸入命令的工具之一。本文將將一些與鼠標(biāo)有關(guān)系的特效。

1、跟隨鼠標(biāo)移動的彩色星星

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

源代碼：

<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">
  //數(shù)組保存星星的顏色，也可以設(shè)置為其它顏色，也可以增加或減少顏色數(shù)量
  var colours=new Array('ff0000','00ff00','0000ff','ff00ff','00ffff','ffff00');
  var amount=colours.length;
  //初始化參數(shù)
  var Ydelay=0,Xdelay=0;  //圓環(huán)中心的位置
  var step=0.2;
  var currStep=0;
  var my=0,mx=0;  //記錄鼠標(biāo)當(dāng)前位置
  var flag=0;
  //在容器中寫入"."字符，閃爍的星星即是從"."變化而來的
  for (i=0; i < amount; i++){
   document.write('<div class = "iestars" >...</div>');
  }
  //處理鼠標(biāo)事件
  function iMouse(){
   my = event.y;
   mx = event.x;
   //第一次初始化，只運(yùn)行一次
   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)中心的位置，為當(dāng)前圓環(huán)中心位置和鼠標(biāo)位置的加權(quán)平均
  function delay(){
   Ydelay += (my-Ydelay)*1/20;
   Xdelay += (mx-Xdelay)*1/20;
   stars();
   setTimeout('delay()',10);
  }
 </script>
</body>
</html>

2、水中鼠標(biāo)特效

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

效果圖：

源代碼：

<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數(shù)組，記錄圖片的位置
    Xpos : [], //x數(shù)組
    Speed :[], //上升速度
    size : [], //范圍
    sizegrow :[],  //增長速度
    angle :[], //余弦曲線的角度
    anglegrow :[], //每次余弦曲線角度變化
    img:"",
  }
  //鼠標(biāo)事件
  document.onmousemove=MouseMove;
  function MouseMove(){
   bubble.my = event.y-20;
   bubble.mx = event.x;
  }
  //初始化數(shù)據(jù)
  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){//當(dāng)?shù)竭_(dá)最上方后，重新初始化
        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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun 測試上述代碼，看看運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

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

您可能感興趣的文章: