JS實現(xiàn)的簡單鼠標跟隨DiV層效果完整實例
更新時間：2015年10月31日 09:31:19 作者：企鵝
這篇文章主要介紹了JS實現(xiàn)的簡單鼠標跟隨DiV層效果,涉及JavaScript基于時間函數(shù)動態(tài)操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)的簡單鼠標跟隨DiV層效果。分享給大家供大家參考，具體如下：
這段代碼呈現(xiàn)一串跟隨鼠標的Div效果，并有拖影特效，隨著鼠標快速的晃動，Div層效果會不斷的增加，后面的Div會自動消失，不過還有些Bug，期待與大家完善這個JS特效。
運行效果截圖如下：
在線演示地址如下：
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>跟隨鼠標的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>
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了對于防止按鈕重復(fù)點擊的嘗試，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Js on及addEventListener原理用法區(qū)別解析
這篇文章主要介紹了Js on及addEventListener原理用法區(qū)別解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
JavaScript類型相關(guān)的常用操作總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript類型相關(guān)的常用操作，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
plupload+artdialog實現(xiàn)多平臺上傳文件
這篇文章主要介紹了plupload+artdialog實現(xiàn)多平臺上傳文件的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要為大家介紹了mongoose之bulkWrite操作使用實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
WordPress中鼠標懸停顯示和隱藏評論及引用按鈕的實現(xiàn)
這篇文章主要介紹了WordPress中鼠標懸停顯示和隱藏評論及引用按鈕的實現(xiàn),順帶顯示和隱藏評論者信息的實現(xiàn)方法,非常實用,需要的朋友可以參考下2016-01-01
這篇文章介紹了HTML中用JS實現(xiàn)旋轉(zhuǎn)的圣誕樹，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
這篇文章主要介紹了JavaScript的this關(guān)鍵字，真正幫助大家做到精通this關(guān)鍵字，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
JavaScript Array.flat()函數(shù)用法解析
這篇文章主要介紹了JavaScript Array.flat()函數(shù)用法解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
微信小程序結(jié)合Storage實現(xiàn)搜索歷史效果
這篇文章主要為大家詳細介紹了微信小程序結(jié)合Storage實現(xiàn)搜索歷史效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05