JS實(shí)現(xiàn)的簡(jiǎn)單鼠標(biāo)跟隨DiV層效果完整實(shí)例
本文實(shí)例講述了JS實(shí)現(xiàn)的簡(jiǎn)單鼠標(biāo)跟隨DiV層效果。分享給大家供大家參考,具體如下:
這段代碼呈現(xiàn)一串跟隨鼠標(biāo)的Div效果,并有拖影特效,隨著鼠標(biāo)快速的晃動(dòng),Div層效果會(huì)不斷的增加,后面的Div會(huì)自動(dòng)消失,不過還有些Bug,期待與大家完善這個(gè)JS特效。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-simple-mouse-over-div-codes/
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> div {width:10px; height:10px; background:red; position:absolute;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>跟隨鼠標(biāo)的Div效果</title> <script> window.onload=function () { var aDiv=document.getElementsByTagName('div'); var i=0; setInterval(function(){ for(i=aDiv.length-1;i>0;i--) { aDiv[i].style.left=aDiv[i-1].style.left; aDiv[i].style.top=aDiv[i-1].style.top; } },5); document.onmousemove=function (ev) { var oEvent=ev||event; aDiv[0].style.left=oEvent.clientX+'px'; aDiv[0].style.top=oEvent.clientY+'px'; }; }; </script> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- js實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)跟隨效果的方法
- 簡(jiǎn)單實(shí)現(xiàn)js鼠標(biāo)跟隨效果
- js鼠標(biāo)跟隨運(yùn)動(dòng)效果
- javascript鼠標(biāo)跟隨運(yùn)動(dòng)3種效果(眼球效果,蘋果菜單,方向跟隨)
- Js鼠標(biāo)跟隨代碼小手點(diǎn)擊實(shí)例方法
- JS實(shí)現(xiàn)的鼠標(biāo)跟隨代碼(卡通手型點(diǎn)擊效果)
- js實(shí)現(xiàn)鼠標(biāo)跟隨運(yùn)動(dòng)效果
- 原生js實(shí)現(xiàn)鼠標(biāo)跟隨效果
- JavaScript實(shí)現(xiàn)的鼠標(biāo)跟隨特效示例【2則實(shí)例】
- js實(shí)現(xiàn)鼠標(biāo)跟隨小游戲
相關(guān)文章
動(dòng)態(tài)加載dtree.js樹treeview(示例代碼)
本篇文章主要是對(duì)動(dòng)態(tài)加載dtree.js樹treeview的示例代碼進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12JavaScript中十種一步拷貝數(shù)組的方法實(shí)例詳解
JavaScript中我們經(jīng)常會(huì)遇到拷貝數(shù)組的場(chǎng)景,但是都有哪些方式能夠來實(shí)現(xiàn)呢,我們不妨來梳理一下,感興趣的朋友跟隨小編一起看看吧2019-04-04BootStrap fileinput.js文件上傳組件實(shí)例代碼
這篇文章主要介紹了BootStrap fileinput.js文件上傳組件實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02