js实现图片局部放大效果,js实现鼠标左右移动

以此是诸如了CSS的margin负值和周旋固定做的四个图形放大的机能。图片初叶只是一对的,鼠标放上去展现任何图片。

  图片部分放大效应结合的知识点首借使DOM的操作,以及事件的行使,所以率先要对DOM的操作有一定理解,其次能对事件的使用有早晚的蕴蓄。

js达成鼠标左右移动,图片也随着移动作效果果,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>

以上便是本文的全体内容,希望本文的剧情对我们的上学恐怕干活能带动一定的增加援救,同期也希望多多扶助帮客之家!

js实现图片局部放大效果,js实现鼠标左右移动。
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距…

无标题文书档案

  图片 1

  • 图片 2
  • 图片 3
  • 图片 4
  • 图片 5
  • 图片 6
  • 图片 7
  • 图片 8
  • 图片 9
  • 图片 10
  • 图片 11

  如上海教室,能够看来,那是放大镜的为主职能,首要分为左右七个部分。左侧分成一张大图,和多个导航栏,在左手则是叁个放大镜放大后的图形。由此,我在画页面包车型地铁时候,概况的HTMl结构如下:

[Ctrl+A 全选
注:如需引进外界Js需刷新技巧实践]

 1 <body>
 2     <div class="choose">
 3         <div class="content">
 4             <img src="images/small1.jpg" id = "small">
 5             <div class="shadow"></div>
 6         </div>
 7         <ul id = "listshow">
 8             <li class="selected">
 9                 <img src="images/small1.jpg" data-img = "images/big1.jpg" alt="图片 12">
10             </li>
11             <li>
12                 <img src="images/small2.jpg" data-img = "images/big2.jpg" alt="图片 13">
13             </li>
14             <li>
15                 <img src="images/small3.jpg" data-img = "images/big3.jpg" alt="图片 14">
16             </li>
17             <li>
18                 <img src="images/small4.jpg" data-img = "images/big4.jpg" alt="图片 15">
19             </li>
20         </ul>
21     </div>
22     <div class="larger">
23         <img src="images/big1.jpg" id = "big">
24     </div>
25 </body>

你只怕感兴趣的小说:

  • javascript鼠标滑过显示二级菜单特效
  • JS落成鼠标移动到缩略图呈现大图的图样放大功效
  • js 鼠标拖动对象
    可让任何div实现拖动作效果果
  • 鼠标滑上去后图片放大浮出成效的js代码
  • js调控鼠标事件移动及移出效果展现
  • 二个简便的js鼠标划过切换效果
  • js 事件目的鼠标滚轮效果演示验证
  • 二个轻易易行的JS鼠标悬停特效具体方法
  • js 鼠标放图片上颠簸效果
  • JavaScript鼠标特效大全

 在那一年,将静态页面按平日格局张开布局,给予css样式如下:

网站地图xml地图