js實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果
更新時(shí)間：2019年10月16日 09:54:41 作者：chen1027_11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果的具體代碼，供大家參考，具體內(nèi)容如下
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
width: 1000px;
height: 600px;
background: #cecece;
margin: 20px auto;
}
img{
width: 50px;
height: 50px;
border-radius: 50%;
background: #f00;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
</div>
<script type="text/javascript">
window.onload = function() {
var oBox = document.getElementById("box");
var oImg=document.getElementsByClassName("img");
oBox.onmousemove = function(e) {
var e = e || window.event;
var left = e.clientX;
var top = e.clientY;
//console.log(left, top);
//設(shè)置oImg偏移量
//oImg.style.left = left + "px";
//oImg.style.top = top + "px";
oImg[0].style.left=left + "px";
oImg[0].style.top=top + "px";
for(var i=oImg.length-1;i>0;i--){
oImg[i].style.left=oImg[i-1].style.left;
oImg[i].style.top=oImg[i-1].style.top;
}
}
}
</script>
</body>
javascript入門(mén)教程專題點(diǎn)擊鏈接查看：javascript入門(mén)教程
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用JavaScript在html文檔內(nèi)添加新的元素節(jié)點(diǎn)
這篇文章主要介紹了使用JavaScript在html文檔內(nèi)添加新的元素節(jié)，主要打方式就是動(dòng)態(tài)的改變?cè)衕tml文檔結(jié)構(gòu)，下文詳細(xì)介紹內(nèi)容需要的可以參考一下2022-02-02
Javascript中查找不以XX字符結(jié)尾的單詞示例代碼
我在寫(xiě)這篇文章之前花了2個(gè)多小時(shí)在弄正則表達(dá)式，下為大家介紹下具體的實(shí)現(xiàn)思路，感興趣的朋友可以參考下2013-10-10
js獲取url參數(shù)的使用擴(kuò)展實(shí)例
js獲取參數(shù)的具體應(yīng)用，歡迎加入腳本之家交流群2007-12-12
js類型轉(zhuǎn)換與引用類型詳解(Boolean_Number_String)
本篇文章主要是對(duì)js中的類型轉(zhuǎn)換與引用類型(Boolean_Number_String)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
這篇文章主要為大家詳細(xì)介紹了bootstrap響應(yīng)式表格的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
JavaScript設(shè)計(jì)模式之工廠模式和抽象工廠模式定義與用法分析
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之工廠模式和抽象工廠模式,結(jié)合實(shí)例形式分析了工廠模式的功能、定義、相關(guān)問(wèn)題解決方法,并分析抽象工廠模式與工廠模式的不同之處,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了JS控制GIF圖片的停止與顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
JavaScript黑洞數(shù)字之運(yùn)算路線查找算法(遞歸算法)實(shí)例
這篇文章主要介紹了JavaScript黑洞數(shù)字之運(yùn)算路線查找算法,涉及JavaScript遞歸操作算法相關(guān)技巧,需要的朋友可以參考下2016-01-01
本文將以yyyy-MM-dd HH:mm:ss為例介紹js date 格式化的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
本篇文章主要介紹了詳解webpack分包及異步加載套路，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06