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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 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 cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
Python实现partial改变方法默认参数
2014/08/18 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
pybind11在Windows下的使用教程
2019/07/04 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python中删除某个元素的方法解析
2019/11/05 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
PHP如何自定义函数
2016/09/16 面试题
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
中层干部竞聘演讲稿
2014/05/15 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
研究生个人学年总结
2015/02/14 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
乔迁新居祝福语
2019/11/04 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android