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


Posted in Javascript onJanuary 25, 2017

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

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

布局:大盒子里面是图片,大盒子position:relative;图片position:absolute;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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;
 //获取鼠标的位置与大盒子中心点位置的距离
 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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 学习书 推荐
Jun 13 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
微信小程序实现多张图片上传功能
Nov 18 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 #Javascript
js实现文字选中分享功能
Jan 25 #Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 #Javascript
jquery实现拖动效果(代码分享)
Jan 25 #Javascript
angular forEach方法遍历源码解读
Jan 25 #Javascript
three.js实现围绕某物体旋转
Jan 25 #Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 #Javascript
You might like
php curl_init函数用法
2014/01/31 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
Django小白教程之Django用户注册与登录
2016/04/22 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
Python实现自动访问网页的例子
2020/02/21 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
浅析python连接数据库的重要事项
2021/02/22 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
主题实践活动总结
2014/05/08 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
Django实现聊天机器人
2021/05/31 Python