JavaScript實(shí)現(xiàn)酷炫的鼠標(biāo)拖尾特效
看完這個保證你有手就行,制作各種好看的小尾巴!
全部代碼如下,看注釋可以輕易看懂
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div樣式*/ #main{ width: auto;height: 1500px;margin: 0;background-color: black; } </style> </head> <body> <div id="main"></div> <script> //==========鼠標(biāo)星球尾巴JS代碼============ //========函數(shù):獲取當(dāng)前鼠標(biāo)的坐標(biāo)========= function getMousePosition(event) { var x = 0;//x坐標(biāo) var y = 0;//y坐標(biāo) //documentElement 返回一個文檔的文檔元素。 doc = document.documentElement; //body 返回文檔的body元素 body = document.body; //解決兼容性 if (!event) event = window.event; //解決鼠標(biāo)滾輪滾動后與相對坐標(biāo)的差值 //pageYoffset是Netscape特有 if (window.pageYoffset) { x = window.pageXOffset; y = window.pageYOffset; } else {//其他瀏覽器鼠標(biāo)滾動 x = (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); y = (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0); } //得到的x加上當(dāng)事件被觸發(fā)時鼠標(biāo)指針向?qū)τ跒g覽器頁面(或客戶區(qū))的水平坐標(biāo) x += event.clientX; //得到的x加上當(dāng)事件被觸發(fā)時鼠標(biāo)指針向?qū)τ跒g覽器頁面(或客戶區(qū))的垂直坐標(biāo) y += event.clientY; //返回x和y return {'x': x, 'y': y}; } //========函數(shù):獲取當(dāng)前鼠標(biāo)的坐標(biāo)========= //=====生成從minNum到maxNum的隨機(jī)數(shù)===== function randomNum(minNum,maxNum){ switch(arguments.length){ case 1: return parseInt(Math.random()*minNum+1,10); case 2: return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); default: return 0; } } //=====生成從minNum到maxNum的隨機(jī)數(shù)====== //======給整個文檔綁定一個鼠標(biāo)移動事件====== document.onmousemove = function(event){ // 在頁面創(chuàng)建一個標(biāo)簽,(這里是創(chuàng)建一個自定義標(biāo)簽styleImg ) var styleImg = document.createElement("div"); //獲取隨機(jī)數(shù)1-5,根據(jù)隨機(jī)數(shù)來設(shè)置標(biāo)簽的樣式 var r = randomNum(1,5); switch (r) { case 1: //設(shè)置圖片的路徑,根據(jù)不同的路徑就可以更改成不同的樣式 styleImg.innerHTML="<img src='../static/muban/images/xing01.png' style='width: 50px;height: auto;'/>" break; case 2: styleImg.innerHTML="<img src='../static/muban/images/xing02.png' style='width: 50px;height: auto;'/>" break; case 3: styleImg.innerHTML="<img src='../static/muban/images/xing03.png' style='width: 50px;height: auto;'/>" break; case 4: styleImg.innerHTML="<img src='../static/muban/images/xing04.png' style='width: 50px;height: auto;'/>" break; case 5: styleImg.innerHTML="<img src='../static/muban/images/xing05.png' style='width: 50px;height: auto;'/>" break; } // 由于要設(shè)置動畫,設(shè)置left 和top,因此,必須要設(shè)置定位 styleImg.style.position = 'absolute' // 設(shè)置標(biāo)簽的初始位置,即鼠標(biāo)的當(dāng)前位置 var x = getMousePosition(event).x; var y = getMousePosition(event).y; // 設(shè)置styleImg的坐標(biāo) styleImg.style.top = y +"px"; styleImg.style.left = x + "px"; //綁定testDiv為當(dāng)前鼠標(biāo)小尾巴生效的區(qū)域 var testDiv = document.getElementById("main"); // 將新建的標(biāo)簽加到頁面的 body標(biāo)簽中 testDiv.appendChild(styleImg); // 在文檔中有超出的地方就會不顯示,所以盡量綁定到頁面的div中 // 設(shè)置溢出隱藏,為了防止鼠標(biāo)在移動的過程中會觸發(fā)上下滾動條 testDiv.style.overflow = 'hidden'; // var count = 0; //setInterval() 方法可按照指定的周期(以毫秒計)來調(diào)用函數(shù)或計算表達(dá)式 var time = setInterval(function(){ // 設(shè)置定時器 ,讓每一次生成的標(biāo)簽在指定的周期內(nèi)修改相應(yīng)的透明度 count += 5; styleImg.style.opacity = (100-count)/100 ; }, 30) // setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式。 // 設(shè)置延時定時器, 在一定的時間后清除上面的定時器,讓創(chuàng)建的標(biāo)簽不再進(jìn)行變化 setTimeout(function(){ // 使用 clearInterval() 來停止執(zhí)行setInterval函數(shù) clearInterval(time); // 刪除創(chuàng)建的標(biāo)簽 testDiv.removeChild(styleImg); },250) } </script> </body> </html>
ps:以上代碼參考了多篇不同的文獻(xiàn)后自己敲的,沒有面向VC寫博客哦!
最后把圖片素材送給你們吧,只要在上面代碼中做簡單的修改,便可以實(shí)現(xiàn)其他樣式的小尾巴?
到此這篇關(guān)于JavaScript實(shí)現(xiàn)酷炫的鼠標(biāo)拖尾特效的文章就介紹到這了,更多相關(guān)JavaScript鼠標(biāo)拖尾特效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js 動態(tài)為textbox添加下拉框數(shù)據(jù)源的方法
這篇文章主要介紹了js 動態(tài)為textbox添加下拉框數(shù)據(jù)源的方法,需要的朋友可以參考下2014-04-04js 數(shù)組當(dāng)前行添加數(shù)據(jù)方法詳解
這篇文章主要介紹了js 數(shù)組當(dāng)前行添加數(shù)據(jù)方法詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07JavaScript函數(shù)式編程實(shí)現(xiàn)介紹
函數(shù)式編程是一種編程范式,將整個程序都由函數(shù)調(diào)用以及函數(shù)組合構(gòu)成。 可以看成一條流水線,數(shù)據(jù)可以不斷地從一個函數(shù)的輸出流入另一個函數(shù)的輸入,最后輸出結(jié)果2022-09-09微信小程序開發(fā)中var that =this的用法詳解
這篇文章主要介紹了微信小程序開發(fā)中var that =this的用法詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01一個JavaScript處理textarea中的字符成每一行實(shí)例
這篇文章主要與大家分享一個JavaScript處理textarea中的字符成每一行實(shí)例,很簡單,但很實(shí)用,大家可以看看2014-09-09H5基于iScroll實(shí)現(xiàn)下拉刷新和上拉加載更多
這篇文章主要為大家詳細(xì)介紹了H5基于iScroll實(shí)現(xiàn)下拉刷新和上拉加載更多效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07