JavaScript實現(xiàn)的鼠標跟隨特效示例【2則實例】
更新時間：2018年12月22日 09:50:53 作者：huansky
這篇文章主要介紹了JavaScript實現(xiàn)的鼠標跟隨特效,結合2則實例形式分析了javascript針對鼠標事件的響應、計算、處理及頁面元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了JavaScript實現(xiàn)的鼠標跟隨特效。分享給大家供大家參考，具體如下：
鼠標是現(xiàn)在電腦的基本配置之一，也是最常用的輸入命令的工具之一。本文將將一些與鼠標有關系的特效。
1、跟隨鼠標移動的彩色星星
如題，會根據(jù)鼠標的移動而移動，并在鼠標周圍隨機來回移動，讓人感覺在放大縮小。根據(jù)書上的代碼做了一些修改。比如，如果用戶不移動鼠標，是不會顯示星星效果的：其次就是將源代碼中的亮度調節(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">
//數(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; //記錄鼠標當前位置
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數(shù)組，記錄圖片的位置
Xpos : [], //x數(shù)組
Speed :[], //上升速度
size : [], //范圍
sizegrow :[], //增長速度
angle :[], //余弦曲線的角度
anglegrow :[], //每次余弦曲線角度變化
img:"",
}
//鼠標事件
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){//當?shù)竭_最上方后，重新初始化
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數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
淺析JS中的 map, filter, some, every, forEach, for in, for of 用法總
本文是小編給大家總結的關于javascript中的map, filter, some, every, forEach, for in, for of 用法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-03-03
javascript實現(xiàn)下班倒計時效果的方法(可桌面通知)
這篇文章主要介紹了javascript實現(xiàn)下班倒計時效果的方法,涉及javascript倒計時效果及桌面提示效果的實現(xiàn)技巧,具有一定參考借鑒價值2015-07-07
這篇文章主要為大家詳細介紹了微信小程序自定義底部導航帶跳轉功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
在JavaScript中可以用下面的幾種方法申明對象:(從"Truly"的文章中學到)2008-10-10
詳解Javacript和AngularJS中的Promises
這篇文章主要介紹了詳解Javacript和AngularJS中的Promises的相關資料,promise是Javascript異步編程很好的解決方案。，需要的朋友可以參考下2016-02-02
JavaScript中的alert()函數(shù)使用技巧詳解
這篇文章主要介紹了JavaScript中的alert()函數(shù)使用技巧詳解,本文講解了普通彈出、帶換行的文本、使用制表符、使用變量、使用樣式等選擇,需要的朋友可以參考下2014-12-12
xmlplus 是一個JavaScript框架，用于快速開發(fā)前后端項目。這篇文章主要介紹了xmlplus組件設計系列之列表，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要給大家介紹了關于JS異步執(zhí)行結果獲取的3種解決方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-02-02
Javascript 檢測、添加、移除樣式(className)函數(shù)代碼
在前臺腳本中，我們經(jīng)常要操作頁面元素的樣式，比如標簽頁切換時，將當前標簽加上一個樣式，當切換到其他標簽時，再將樣式還原，本文介紹的是直接添加和移除 className 的方法。2009-09-09
JavaScript實現(xiàn)擦玻璃效果分析鼠標移動響應時間粒度問題
這篇文章主要為大家介紹了JavaScript實現(xiàn)擦玻璃效果分析鼠標移動響應時間粒度問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10