js實現(xiàn)鼠標(biāo)左右移動，圖片也跟著移動效果
更新時間：2017年01月25日 10:15:54 作者：happyzgm
本文主要介紹了js實現(xiàn)鼠標(biāo)左右移動，圖片也跟著移動效果的方法與思路。具有很好的參考價值，下面跟著小編一起來看下吧
效果：鼠標(biāo)往左移，圖片對應(yīng)右移，鼠標(biāo)往右移，圖片就左移動。圖片距離越遠偏移距離越大。
思路：首先獲取圖片原先的距離。設(shè)置一個變化值，圖片的最終距離等于原先的距離加上變化值
布局：大盒子里面是圖片，大盒子position:relative；圖片position:absolute;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style>
body{margin:0;}
#wrap{width:800px;height:500px;margin:30px auto; border:1px solid #000; position:relative;}
#wrap img{ position:absolute;}
#wrap img:nth-of-type(1){ left:200px;top:200px; z-index:0;}
#wrap img:nth-of-type(2){ left:300px;top:180px; z-index:1;}
#wrap img:nth-of-type(3){ left:100px;top:100px; z-index:2;}
#wrap img:nth-of-type(4){ left:400px;top:110px; z-index:3;}
</style>
</head>
<body>
<div id="wrap">
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/18/094455cpacwz1yai2ap43p.jpg.editor.jpg" />
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/18/094455csz3xxx1x23um7e9.jpg.editor.jpg" />
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/18/094455fv3rzfoov04owrof.jpg.editor.jpg" />
<img src="http://cdn.attach.qdfuns.com/notes/pics/201701/18/094455fv3rzfoov04owrof.jpg.editor.jpg" />
</div>
<script>
var oWrap=document.getElementById("wrap");
var aImg=oWrap.getElementsByTagName("img");
var iMax=4;
//獲取圖片的初始位置
for(var i=0;i<aImg.length;i++){
aImg[i].startX=parseInt(getStyle(aImg[i],'left'))
}
oWrap.onmousemove=function(ev){
ev=ev||window.event;
//獲取鼠標(biāo)的位置與大盒子中心點位置的距離
var iX=ev.clientX-(oWrap.offsetLeft+this.offsetWidth/2)
for(var i=0;i<aImg.length;i++){
//獲取每個img的z-index
var iZindex=getStyle(aImg[i],'zIndex')
//Zindex越大移動的相對距離越小
var iDisL=-parseInt(iX/iMax*(iMax-iZindex)/5)
//圖片的距離等于原先的距離加上計算的距離
aImg[i].style.left=aImg[i].startX+iDisL+'px'
}
}
function getStyle(obj,attr)
{
if( obj.currentStyle){
return obj.currentStyle[attr];
}
return getComputedStyle(obj)[attr];
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
- js控制鼠標(biāo)事件移動及移出效果顯示
- JS實現(xiàn)鼠標(biāo)移動到縮略圖顯示大圖的圖片放大效果
- javascript實現(xiàn)圖片跟隨鼠標(biāo)移動效果的方法
- js鼠標(biāo)移動時禁止選中文字
- js+html+css實現(xiàn)鼠標(biāo)移動div實例
- JavaScript獲取鼠標(biāo)移動時的坐標(biāo)(兼容IE8、chome谷歌、Firefox)
- js實現(xiàn)文字跟隨鼠標(biāo)移動而移動的方法
- js圖片跟隨鼠標(biāo)移動代碼
- js鼠標(biāo)移動在title中顯示圖片的效果代碼
- JS實現(xiàn)鼠標(biāo)移動拖尾
相關(guān)文章
這篇文章主要為大家詳細介紹了javascript特殊文本輸入框網(wǎng)頁特效,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
JavaScript Konami Code 實現(xiàn)代碼
JavaScript Konami Code 實現(xiàn)代碼2009-07-07
JavaScript學(xué)習(xí)筆記之ES6數(shù)組方法
ES6給數(shù)組添加了一些新特性，而這些新特性到目前為止完全可以運用到自己的業(yè)務(wù)層。在這一節(jié)中將總結(jié)有關(guān)于ES6給數(shù)組提供一些新特性的使用方法2016-03-03
underscore之Collections_動力節(jié)點Java學(xué)院整理
underscore為集合類對象提供了一致的接口。集合類是指Array和Object，暫不支持Map和Set。下面通過本文給大家分享underscore之Collections的相關(guān)知識，需要的的朋友參考下吧2017-07-07
JavaScript實現(xiàn)為圖片添加水印的方法詳解
在很多地方，我們都可以看到，上傳圖片的時候，圖片都會被加上默認的水印，因此，我們在個人網(wǎng)站進行圖片操作時，也可以給它加上自己獨特的水印，本文就為大家整理了JS添加圖片合文字水印的方法，需要的可以參考一下2023-05-05
本文給大家分享一段實例代碼有關(guān)js實現(xiàn)無縫滾動效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-03-03
這篇文章主要給大家介紹了如何利用原生js實現(xiàn)鍵盤控制div移動，并且解決在移動過程中的停頓問題，文中給出了詳細的示例代碼，相信對大家的理解和學(xué)習(xí)很有幫助，下面跟著小編一起來看看吧。2016-12-12
微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動效果，代碼很簡單，直接復(fù)制即可根據(jù)自己的需求去修改，對小程序商品數(shù)據(jù)聯(lián)動實例代碼感興趣的朋友一起看看吧2022-08-08
BootStrap模態(tài)框和select2合用時input無法獲取焦點的解決方法
在bootstrap的模態(tài)框里使用select2插件,會導(dǎo)致select2里的input輸入框沒有辦法獲得焦點,沒有辦法輸入。怎么解決這個問題呢？下面小編給大家?guī)砹薆ootStrap模態(tài)框和select2合用時input無法獲取焦點的解決方法，一起看看吧2017-09-09
JavaScript 常見安全漏洞和自動化檢測技術(shù)
js安全漏洞目前存在較大的技術(shù)難題，本文結(jié)合案例給大家詳解JavaScript 常見安全漏洞和自動化檢測技術(shù)，需要的朋友可以參考下2015-08-08