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 相关文章推荐
动态添加js事件实现代码
Mar 12 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
Javascript创建类和对象详解
May 31 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
vuex管理状态仓库使用详解
Jul 29 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 魔术常量详解及实例代码
2016/12/04 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
python文件比较示例分享
2014/01/10 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
世界上最好的足球商店:Unisport
2019/03/02 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
赔偿协议书
2015/01/27 职场文书
MySQL分库分表详情
2021/09/25 MySQL
Oracle中日期的使用方法实例
2022/07/07 Oracle