原生js实现放大镜
更新时间：2017年02月20日 14:40:45 作者：前端工程师_钱成
本文主要分享了原生js实现放大镜效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
原理：左边阴影在左边图片上从左到右移动的时候，右边大框也在右边大图片上从左到右移动（尽管在视觉、原理和代码上是相反的）；所谓放大，其实就是一张原本就很小的图对应一张原本就很大的图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.small{
width: 400px;
height: 400px;
position: relative;
background: url(http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=7dca2c442134be6a652e087296c8ac80) no-repeat center;
border: 1px solid #ccc;
}
.small .inner{
width: 100px;
height: 100px;
background: yellow;
opacity: 0.5;
filter: alpha(opacity=50);
position: absolute;
left:0;
top:0;
display: none;
}
.big{
width: 400px;
height: 400px;
position: absolute;
left:410px;
top:0;
overflow: hidden;
border: 1px solid #ccc;
display: none;
}
.big img{
width: 200%;
height: 200%;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="small" class="small">
<div class="inner"></div>
</div>
<div id="big" class="big">
<img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d7dec5aeff022ea80c47eb76dc5838d8" alt=""/>
</div>
<script>
var small=document.getElementById('small');
var inner=small.getElementsByTagName('div')[0];
var big=document.getElementById('big');
var img=big.getElementsByTagName('img')[0];
//当鼠标移入small的时候，inner和big显示
small.onmouseover=function(){
big.style.display='block';
inner.style.display='block';
};
//当鼠标在small移动的时候：1）鼠标在inner的中间 2）inner跟随鼠标移动
small.onmousemove=function(e){
e=e||window.event;
var left=e.clientX-this.offsetLeft-inner.offsetWidth/2;
var top=e.clientY-this.offsetTop-inner.offsetHeight/2;
if(left<=0){
left=0;
}else if(left>=this.offsetWidth-inner.offsetWidth){
left=this.offsetWidth-inner.offsetWidth
}
if(top<=0){
top=0;
}else if(top>=this.offsetHeight-inner.offsetHeight){
top=this.offsetHeight-inner.offsetHeight
}
inner.style.left= left+'px';
inner.style.top= top+'px';
//当inner移动的时候，大图跟着一起移动，并且，大图和inner移动的方向相反；
//或者理解为：左边阴影在图片上从左到右移动的时候，右边大框也在大图片上从左到右移动（尽管视觉上是相反的）。
img.style.left=left/(small.offsetWidth-inner.offsetWidth)*(big.offsetWidth-img.offsetWidth)+'px';
img.style.top=top/(small.offsetHeight-inner.offsetHeight)*(big.offsetHeight-img.offsetHeight)+'px';
};
//当鼠标移出的时候，inner和big隐藏；
small.onmouseout=function(){
big.style.display='none';
inner.style.display='none';
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了自定义javascript验证框架,结合实例形式分析了javascript正则验证相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2019-05-05
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
这篇文章主要介绍了情人节单身的我是如何在敲完代码之后收到12束玫瑰的，感兴趣的朋友一起来学习下2015-08-08
HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)
这篇文章主要介绍了HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-08-08
关于JS打印问题！网上收集+自己总结 ，需要的朋友可以参考下。2009-11-11
这篇文章介绍了JavaScript中的事件处理程序，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
在JavaScript 中按字母排序之如何在 JS 中按名称排序
有时你可能有一个单词数组,你想按字母顺序（从 a-z）对每个单词进行排序,或者你可能有一个包含用户信息（包括名字）的对象数组,例如,你想按照用户的名字来排序,接下来通过本文给大家介绍在JavaScript 中按字母排序之如何在 JS 中按名称排序,需要的朋友可以参考下2023-09-09
很多小伙伴都在学习JavaScript,可能也会有老师提出这样一个问题,如何用js编写一个简单的验证码,这里就和大家分享一下,这篇文章主要给大家介绍了关于JavaScript实现图形验证码的相关资料,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了js实现购物车加减和价格运算，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家详细介绍了Bootstrap中datetimepicker的使用方法，一款功能强大的日期选择控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
可以先使用 DOM 的 createElement 方法创建 tr 和 td，然后对 td 的 innerHTML 进行相应操作，最后用 appendChild 方法把创建的元素添加到 DOM 树中。这样在 IE 下就可以正常运行了。2009-08-08
最新评论