快捷導(dǎo)航

js實(shí)現(xiàn)鼠標(biāo)左右移動(dòng)，圖片也跟著移動(dòng)效果

更新時(shí)間：2017年01月25日 10:15:54 作者：happyzgm

本文主要介紹了js實(shí)現(xiàn)鼠標(biāo)左右移動(dòng)，圖片也跟著移動(dòng)效果的方法與思路。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

效果：鼠標(biāo)往左移，圖片對(duì)應(yīng)右移，鼠標(biāo)往右移，圖片就左移動(dòng)。圖片距離越遠(yuǎn)偏移距離越大。

思路：首先獲取圖片原先的距離。設(shè)置一個(gè)變化值，圖片的最終距離等于原先的距離加上變化值

布局：大盒子里面是圖片，大盒子position:relative；圖片position:absolute;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(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)的位置與大盒子中心點(diǎn)位置的距離
 var iX=ev.clientX-(oWrap.offsetLeft+this.offsetWidth/2)
 for(var i=0;i<aImg.length;i++){
 //獲取每個(gè)img的z-index
 var iZindex=getStyle(aImg[i],'zIndex')
 //Zindex越大移動(dòng)的相對(duì)距離越小
 var iDisL=-parseInt(iX/iMax*(iMax-iZindex)/5)
 //圖片的距離等于原先的距離加上計(jì)算的距離
 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>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

javascript特殊文本輸入框網(wǎng)頁(yè)特效
這篇文章主要為大家詳細(xì)介紹了javascript特殊文本輸入框網(wǎng)頁(yè)特效,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
JavaScript Konami Code 實(shí)現(xiàn)代碼
JavaScript Konami Code 實(shí)現(xiàn)代碼
2009-07-07
JavaScript學(xué)習(xí)筆記之ES6數(shù)組方法
ES6給數(shù)組添加了一些新特性，而這些新特性到目前為止完全可以運(yùn)用到自己的業(yè)務(wù)層。在這一節(jié)中將總結(jié)有關(guān)于ES6給數(shù)組提供一些新特性的使用方法
2016-03-03
underscore之Collections_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
underscore為集合類對(duì)象提供了一致的接口。集合類是指Array和Object，暫不支持Map和Set。下面通過(guò)本文給大家分享underscore之Collections的相關(guān)知識(shí)，需要的的朋友參考下吧
2017-07-07
JavaScript實(shí)現(xiàn)為圖片添加水印的方法詳解
在很多地方，我們都可以看到，上傳圖片的時(shí)候，圖片都會(huì)被加上默認(rèn)的水印，因此，我們?cè)趥€(gè)人網(wǎng)站進(jìn)行圖片操作時(shí)，也可以給它加上自己獨(dú)特的水印，本文就為大家整理了JS添加圖片合文字水印的方法，需要的可以參考一下
2023-05-05
JavaScript無(wú)縫滾動(dòng)效果的實(shí)例代碼
本文給大家分享一段實(shí)例代碼有關(guān)js實(shí)現(xiàn)無(wú)縫滾動(dòng)效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
2017-03-03
原生js實(shí)現(xiàn)鍵盤控制div移動(dòng)且解決停頓問(wèn)題
這篇文章主要給大家介紹了如何利用原生js實(shí)現(xiàn)鍵盤控制div移動(dòng)，并且解決在移動(dòng)過(guò)程中的停頓問(wèn)題，文中給出了詳細(xì)的示例代碼，相信對(duì)大家的理解和學(xué)習(xí)很有幫助，下面跟著小編一起來(lái)看看吧。
2016-12-12
微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動(dòng)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動(dòng)效果，代碼很簡(jiǎn)單，直接復(fù)制即可根據(jù)自己的需求去修改，對(duì)小程序商品數(shù)據(jù)聯(lián)動(dòng)實(shí)例代碼感興趣的朋友一起看看吧
2022-08-08
BootStrap模態(tài)框和select2合用時(shí)input無(wú)法獲取焦點(diǎn)的解決方法
在bootstrap的模態(tài)框里使用select2插件,會(huì)導(dǎo)致select2里的input輸入框沒(méi)有辦法獲得焦點(diǎn),沒(méi)有辦法輸入。怎么解決這個(gè)問(wèn)題呢？下面小編給大家?guī)?lái)了BootStrap模態(tài)框和select2合用時(shí)input無(wú)法獲取焦點(diǎn)的解決方法，一起看看吧
2017-09-09
JavaScript 常見(jiàn)安全漏洞和自動(dòng)化檢測(cè)技術(shù)
js安全漏洞目前存在較大的技術(shù)難題，本文結(jié)合案例給大家詳解JavaScript 常見(jiàn)安全漏洞和自動(dòng)化檢測(cè)技術(shù)，需要的朋友可以參考下
2015-08-08