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

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

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

布局：大盒子里面是图片，大盒子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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • js实现点击左右按钮轮播图片效果实例

    本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un

  • js实现图片点击左右轮播

    js实现图片点击左右轮播

    这个 相当于一个小框架,拿来就可以用: 1. 功能: 如上图显示: 点击左右两个button,可以实现图片向左右滚动,也可以设置在多少秒自己滚动. 2. 首先建立一个js文件,文件名为play.js(只要和HTML中的引入相同就可以了): var sina = { $: function(objName) { if (document.getElementById) { return eval('document.getElementById("' + objName + '")')

  • js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码. 最后的效果如下: Html代码部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <met

  • 带左右箭头图片轮播的JS代码

    带左右箭头图片轮播的JS代码

    轮播图实现效果见下图,图片能自己轮播,点击左右按钮进行翻页轮播,鼠标悬停图片或者标题上,停止轮播: 效果图为: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/19

  • JS实现的相册图片左右滚动完整实例

    本文实例讲述了JS实现的相册图片左右滚动效果.分享给大家供大家参考,具体如下: 执行左移右移函数: var $get = function(id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, source) { for (var property in source) { destination[property] = s

  • 常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全(推荐)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <head> <-----> </head> <body> <!--向下滚动代码开始--> <div id="colee" style="overflow:hidden;height:253px;width:410px;"> <div id="colee1"> <p><img src=&quo

  • javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

    本文实例讲述了javascript实现图片左右滚动效果.分享给大家供大家参考,具体如下: html代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <

  • js实现图片左右滚动效果

    js实现图片左右滚动效果

    需求:页面显示教师信息列表,列表中每一条数据显示图片滚动插件,每张图片的长宽及长宽比例各不相同. 前提条件:美工把静态页面写好 HTML代码: @using Models; @{ List<cms_content> teacherList = ViewData["teacherList"] as List<cms_content>; //春雨树频道 PagerModel pager = ViewData["pager"] as PagerMo

  • 图片的左右移动，js动画效果实现代码

    图片的左右移动,动画效果的实现 =(xk+xp)/2) { if (smer == 1) step--; else step++; } else { if (smer == 1) step++; else step--; } if (x >= xk) { x = xk; smer = -1; } if (x [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)

    **兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码(支持左移/右移功能)(本示例为上下两行图片进行双行滚动) **实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆, **通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置, **因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到"无缝&

随机推荐