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 相关文章推荐
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
Vue.js实现立体计算器
Feb 22 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
Yii框架函数简单用法分析
2019/09/09 PHP
js 动态修改css文件的方法
2014/08/05 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
简单的命令查看安装的python版本号
2020/08/28 Python
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
电台实习生求职信
2014/02/25 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
Redis高可用集群redis-cluster详解
2022/03/20 Redis
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS