鼠标移动效果html5,js实现鼠标左右移动，图片也跟着移动效果

效果：鼠标往左移，图片对应右移，鼠标往右移，图片就左移动。图片距离越远偏移距离越大。

思路：首先获取图片原先的距离。设置一个变化值，图片的最终距离等于原先的距离加上变化值

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

无标题文档

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;}

var oWrap=document.getElementById("wrap");

var aImg=oWrap.getElementsByTagName("img");

var iMax=4;

//获取图片的初始位置

for(var i=0;i

aImg[i].startX=parseInt(getStyle(aImg[i],'left'))

}

oWrap.οnmοusemοve=function(ev){

ev=ev||window.event;

//获取鼠标的位置与大盒子中心点位置的距离

var iX=ev.clientX-(oWrap.offsetLeft+this.offsetWidth/2)

for(var i=0;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];

}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

鼠标移动效果html5,js实现鼠标左右移动，图片也跟着移动效果相关推荐

京东css3动画全屏海报_CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列表块的收缩和展开动画效果,几乎都是使用 display 的 none 和 block,或者 visibility 的 hi ...
html点击鼠标页面出现爱心,js实现鼠标点击飘爱心效果
本文实例为大家分享了js实现鼠标点击飘爱心的具体代码,供大家参考,具体内容如下鼠标点击特效 html { cursor: pointer; } h3 { text-align: center; us ...
html鼠标移动自动展开,JS实现鼠标滑过折叠与展开菜单效果代码
本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效 ...
html实现鼠标拖拽按钮,JS实现鼠标按下拖拽效果
原生js实现鼠标按下拖拽效果,供大家参考,具体内容如下鼠标拖动 body { margin: 0; } div { width: 200px; height: 200px; position: ab ...
html5怎么产生手风琴效果,Html5 js如何实现手风琴效果
Html5 js如何实现手风琴效果发布时间:2020-08-03 09:54:10 来源:亿速云阅读:92 作者:小猪这篇文章主要为大家展示了Html5 js如何实现手风琴效果,内容简而易懂,希 ...
html5 js获取鼠标坐标,js怎么获取鼠标在div中的相对位置
大家在做网页的时候都可能会用到鼠标在div中的相对位置,那么怎么获取鼠标在div中的相对位置呢?下面由学习啦小编教大家怎么获取鼠标在div中的相对位置吧. 如何获取鼠标在div中的相对位置代码如下: ...
php鼠标跟随特效,原生js实现鼠标跟随效果
鼠标跟随效果 *{margin: 0;padding: 0;} img{position:absolute;top:0;left:0;} (function(window){ // 获取对象 var ...
上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...
html鼠标悬停改变背景,js设置鼠标悬停改变背景色实现详解_哒哒_前端开发者
看了网上那么多的 this is test! }); function changBkColor(obj){ obj.οnmοuseοver=function(){ this.className=&q ...

鼠标移动效果html5,js实现鼠标左右移动，图片也跟着移动效果

鼠标移动效果html5,js实现鼠标左右移动，图片也跟着移动效果相关推荐

最新文章

热门文章