JavaScript之图片操作5
Posted 紅葉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript之图片操作5相关的知识，希望对你有一定的参考价值。
本次的图片操作是要实现模仿天猫淘宝的放大镜效果，如下图所示：
其实现原理其实很简单，主要就是定位的运用，在上面的图中，左边是一个div，它的大小就是左边图片的大小，我们称为左窗口（原图），红色部分我们称为放大镜，右边也是一个div，我们称为右窗口，在右窗口中有一个大图，要实现放大效果，就需要保证原图/放大镜 = 大图 / 右窗口 = 放大倍率。当鼠标在左图中移动时，让放大镜跟随鼠标一起移动，然后大图在又窗口中同步运动，这样就可以模拟放大效果了。
首先是基本的结果：
<body> <div id="box"> <img src="img/small.jpg"/> <div id="small"></div> </div> <div id="big"> <img src="img/big.jpg" id="imgs"/> </div> </body>
然后是基本样式：
html,body {
margin: 0;
padding:0;
}
/* 小图 */
#box{
width: 310px;
height: 310px;
position: relative;
float:left;
}
#box img{
width:100%;
height:100%;
}
/* 红色方块 */
#box #small{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background: red;
opacity: 0.6;
display: none;
}
/* 放大图的盒子 */
#big{
width: 310px;
height: 310px;
overflow: hidden;
position: relative;
display: none;
float:left;
}
/* 大图 */
#big img{
width: 930px;
height: 930px;
position: absolute;
}
这里为了简单操作，我们将右窗口设置成和原图也就是左窗口同样大小。
通过上面我们知道，大图是右窗口的3倍，所以是放大了3倍，而且放大镜是原图的三分之一。
接下来需要设置在鼠标没有悬浮在左窗口时，放大镜、右窗口和原图是不可见的，只有当鼠标悬浮在左窗口之上时，放大镜、右窗口和原图是可见的。
box.onmouseenter = function(e){
big.style.display=\'block\';
small.style.display=\'block\';
}
box.onmouseleave = function(e){
big.style.display=\'none\';
small.style.display=\'none\';
}
最后就是监听鼠标事件，实现放大效果了。
box.onmousemove = function(e){ //获取鼠标的x、y坐标。为了让鼠标刚好在small红色小方块的中心，所以需要减去50 var top = e.clientY-50; var left = e.clientX-50; //限制small小方块移出box的范围 if(top > 200){top = 200}; if(top < 0){top = 0}; if(left > 200){left = 200}; if(left < 0){left = 0}; //动态设置small小方块的位置，让小方块跟随鼠标移动 small.style.left = left + \'px\'; small.style.top = top + \'px\'; //让big里面的图片跟随鼠标的移动而移动。这里为什么要乘以（-3）呢？因为big里面的大图是box的3倍。鼠标在box上面向右移动1px，那么big里面的大图就要向左移动(1 x -3)px才能达到我们想要的效果。 img.style.top = top*(-3) + \'px\'; img.style.left = left*(-3) + \'px\'; }
这样，就可以实现放大镜效果了。
详细代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="box"> <img src="img/small.jpg"/> <div id="small"></div> </div> <div id="big"> <img src="img/big.jpg" id="imgs"/> </div> </body> <script> var box = document.querySelector(\'#box\'); var small = document.querySelector(\'#small\'); var big = document.querySelector(\'#big\'); var img = document.querySelector(\'#imgs\'); box.onmousemove = function(e){ var top = e.clientY-50; var left = e.clientX-50; if(top > 200){top = 200}; if(top < 0){top = 0}; if(left > 200){left = 200}; if(left < 0){left = 0}; small.style.left = left + \'px\'; small.style.top = top + \'px\'; img.style.top = top*(-3) + \'px\'; img.style.left = left*(-3) + \'px\'; } box.onmouseenter = function(e){ big.style.display=\'block\'; small.style.display=\'block\'; } box.onmouseleave = function(e){ big.style.display=\'none\'; small.style.display=\'none\'; } </script> </html>
jQuery也可以实现上面的效果，原理是一样，基于鼠标事件和定位，这里就不再详细介绍了，会在代码下载链接中给出详细完整的代码。
完整代码下载：点这里
以上是关于JavaScript之图片操作5的主要内容，如果未能解决你的问题，请参考以下文章