JavaScript實現(xiàn)的鼠標跟隨特效示例【2則實例】
本文實例講述了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-03javascript實現(xiàn)下班倒計時效果的方法(可桌面通知)
這篇文章主要介紹了javascript實現(xiàn)下班倒計時效果的方法,涉及javascript倒計時效果及桌面提示效果的實現(xiàn)技巧,具有一定參考借鑒價值2015-07-07詳解Javacript和AngularJS中的Promises
這篇文章主要介紹了詳解Javacript和AngularJS中的Promises的相關資料,promise是Javascript異步編程很好的解決方案。,需要的朋友可以參考下2016-02-02JavaScript中的alert()函數(shù)使用技巧詳解
這篇文章主要介紹了JavaScript中的alert()函數(shù)使用技巧詳解,本文講解了普通彈出、帶換行的文本、使用制表符、使用變量、使用樣式等選擇,需要的朋友可以參考下2014-12-12Javascript 檢測、添加、移除樣式(className)函數(shù)代碼
在前臺腳本中,我們經(jīng)常要操作頁面元素的樣式,比如標簽頁切換時,將當前標簽加上一個樣式,當切換到其他標簽時,再將樣式還原,本文介紹的是直接添加和移除 className 的方法。2009-09-09JavaScript實現(xiàn)擦玻璃效果分析鼠標移動響應時間粒度問題
這篇文章主要為大家介紹了JavaScript實現(xiàn)擦玻璃效果分析鼠標移動響應時間粒度問題詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10