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使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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 数组教程 定义数组
2009/10/23 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
Pycharm远程调试openstack的方法
2017/11/21 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
如何写python的配置文件
2020/06/07 Python
降低python版本的操作方法
2020/09/11 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
2013年学期结束动员演讲稿
2014/01/07 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
给物业的表扬信
2014/01/21 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
致运动员的广播稿
2015/08/19 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL