您的位置：首页 > Web前端 > JavaScript

原生JS实现图片的放大镜效果

2017-03-16 16:27 841 查看

实现效果 : 将鼠标移动至图片时,在图片一侧显示鼠标周围位置对应的大图.大图随着鼠标的移动相应改变,鼠标移出时大图消失.

思路 :

1.将浏览的图片,放大后的图片,及鼠标周围的方块布局完成;

2.获取事件对象中的鼠标位置(left,top),通过简单的计算,得到鼠标周围方块的时时位置;

3.根据方块与图片的比例和大图所在块的尺寸与大图的比例,计算得到大图的时时位置;

4.添加鼠标移入移出事件.

值得注意的是 : 当触发onmousemove事件时,浏览器会判断鼠标与事件源之间是否存在子元素,若存在将会吧子元素作为事件源,因此导致方块乱跳现象.处理办法为 : 在图片块中加入一个带有定位属性,尺寸与图片块相同的块,将透明度设为0,这样就隔绝了鼠标下的方块,其实相当于事件源也发生了改变.

完整代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{                              /*全局重置*/
padding: 0;
margin: 0;
}
#box{
position: relative;         /*这里也可以使用绝对属性*/
width: 400px;
height: 300px;
margin: 110px;
background: url(/JS练习/DOM/pics/2.jpg);
cursor: crosshair;          /*改变鼠标样式*/
}
#sbox{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 150px;
background: thistle;
opacity: 0.55;              /*设置透明度,符合w3c规范*/
filter: alpha(opacity=55);  /*低版本IE标准*/
display: none;              /*设置不可见*/
}
#big{
position: absolute;
left: 550px;
top: 100px;
display: none;
width: 400px;
height: 300px;
border: 1px darkgray solid;
overflow: hidden;           /*图片溢出隐藏*/
}
#rpic{
position: absolute;
left: 0;
top: 0;
}
#cover{
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 300px;
background: black;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
<script type="text/javascript">
window.onload=function(){                       //加载页面
var box = document.getElementById("box");   //抓取元素
var rpic = document.getElementById("rpic");
var sbox = document.getElementById("sbox");
var cover = document.getElementById("cover");
cover.onmousemove=function(e){              //绑定鼠标移动时间
var ev = window.event || e ;            //事件对象的兼容性写法
var evx = ev.offsetX ||ev.layerX;       //获得鼠标离相对最近定位属性的左边距
var evy = ev.offsetY ||ev.layerY;       //获得上边距
document.title=evx +'|'+evy;            //在title中显示
var box_x = evx-100;                    //计算小方块的边距
var box_y = evy-75;
if (box_x<0) {                          //赋值前判断方块是否出界并处理
box_x=0;
}
if (box_x>200) {
box_x=200;
}
if (box_y<0) {
box_y=0;
}
if (box_y>150) {
box_y=150;
}
big.style.display='block';              //改变属性,使鼠标移入时图片显示
sbox.style.display='block';
sbox.style.left=box_x+'px';             //赋值新位置
sbox.style.top=box_y+'px';
var rpic_x=-2*box_x;                    //得到大图的时时定位数据
var rpic_y=-2*box_y;
rpic.style.left=rpic_x+'px';
rpic.style.top=rpic_y+'px';

}
box.onmouseout=function(){                  //绑定移出事件
big.style.display='none';
sbox.style.display='none';
}
}
</script>
</head>
<body>
<div id="box">                              <!--图片的div-->
<div id="sbox"></div>                   <!--方块的div-->
<div id="cover"></div>                  <!--透明层的div-->
</div>
<div id="big" >                             <!--放置大图的div-->
<img src="/JS练习/DOM/pics/2b.jpg" id='rpic' />  <!--加入图片-->
</div>
</body>
</html>

以上内容学习参考了后盾网孙琪峥老师的公共教学资源,侵权删.

欢迎指导交流.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航