js實現(xiàn)圖片跟隨鼠標(biāo)移動效果
更新時間：2019年10月16日 09:54:41 作者：chen1027_11
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)圖片跟隨鼠標(biāo)移動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)圖片跟隨鼠標(biāo)移動效果的具體代碼，供大家參考，具體內(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入門教程專題點擊鏈接查看：javascript入門教程
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用JavaScript在html文檔內(nèi)添加新的元素節(jié)點
這篇文章主要介紹了使用JavaScript在html文檔內(nèi)添加新的元素節(jié)，主要打方式就是動態(tài)的改變原有html文檔結(jié)構(gòu)，下文詳細(xì)介紹內(nèi)容需要的可以參考一下2022-02-02
Javascript中查找不以XX字符結(jié)尾的單詞示例代碼
我在寫這篇文章之前花了2個多小時在弄正則表達(dá)式，下為大家介紹下具體的實現(xiàn)思路，感興趣的朋友可以參考下2013-10-10
js獲取參數(shù)的具體應(yīng)用，歡迎加入腳本之家交流群2007-12-12
js類型轉(zhuǎn)換與引用類型詳解(Boolean_Number_String)
本篇文章主要是對js中的類型轉(zhuǎn)換與引用類型(Boolean_Number_String)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要為大家詳細(xì)介紹了bootstrap響應(yīng)式表格的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
JavaScript設(shè)計模式之工廠模式和抽象工廠模式定義與用法分析
這篇文章主要介紹了JavaScript設(shè)計模式之工廠模式和抽象工廠模式,結(jié)合實例形式分析了工廠模式的功能、定義、相關(guān)問題解決方法,并分析抽象工廠模式與工廠模式的不同之處,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了JS控制GIF圖片的停止與顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
JavaScript黑洞數(shù)字之運算路線查找算法(遞歸算法)實例
這篇文章主要介紹了JavaScript黑洞數(shù)字之運算路線查找算法,涉及JavaScript遞歸操作算法相關(guān)技巧,需要的朋友可以參考下2016-01-01
本文將以yyyy-MM-dd HH:mm:ss為例介紹js date 格式化的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
本篇文章主要介紹了詳解webpack分包及異步加載套路，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06