简单实现js放大镜效果
更新时间：2017年07月24日 14:41:08 作者：diasa
这篇文章主要教大家如何简单实现js放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js放大镜效果展示的具体代码，供大家参考，具体内容如下
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,div,img{
margin:0;
padding:0;
}
img{
display:block;
border:none;
}
#box{
position:absolute;
top:20px;
left:20px;
width:350px;
height:350px;
box-shadow:3px 3px 10px 0 #111111;
}
#box img{
width:100%;
height:100%;
}
#mark{
display:none;
position:absolute;
top:0;
left:0;
width:175px;
height:175px;
background:#000;
opacity: 0.5;
filter:alpha(opacity=50);
cursor:move;
}
#boxRight{
display:none;
position:absolute;
top:20px;
left:380px;
width:350px;
height:350px;
overflow:hidden;
}
/*我们右侧的图片的大小是需要严格计算的:
mark的width是box的width的一半，那么我们的大图宽度也应该是小图的二倍
*/
#boxRight img{
position:absolute;
top:0;
left:0;
width:200%;
height:200%;
}
</style>
</head>
<body>
<div id='box'>
<img src="img/iphone.jpg" alt="">
<div id='mark'></div>
</div>
<div id='boxRight'>
<img src="img/iphone_big.jpg" alt="">
</div>
<script>
//放大镜的原理: 我们的mark横向是box的一半，纵向也是box的一半，那么右侧的大图横向（纵向）应该是左侧小图的2倍
var box = document.getElementById('box');
var mark = document.getElementById('mark');
var boxRight = document.getElementById('boxRight');
//设置mark这个盒子
function setPosition(e){
var top = e.clientY - box.offsetTop - (mark.offsetHeight/2);
var left = e.clientX - box.offsetLeft - (mark.offsetWidth/2);
//边界判断
var tempL = 0,tempT = 0;
var minL = 0,minT = 0,maxL = box.offsetWidth - mark.offsetWidth,maxT = box.offsetHeight - mark.offsetHeight ;
if(left<minL){
mark.style.left = minL + "px";
tempL = minL;
}else if(left>maxL){
mark.style.left = maxL + "px";
tempL = maxL;
}else{
mark.style.left = left + "px";
tempL = left;
}
if(top<minT){
mark.style.top = minT + "px";
tempT = minT;
}else if(top>maxT){
mark.style.top = maxT + "px";
tempT = maxT;
}else{
mark.style.top = top + "px";
tempT = top;
}
//右侧图片跟着运动:左侧移动多少，右侧跟着移动他的2倍即可
var oImg = boxRight.getElementsByTagName("img")[0];
oImg.style.left = -tempL*2 + "px";
oImg.style.top = -tempT*2 + "px";
}
box.onmouseenter = function(e){
e = e || window.event;
mark.style.display = "block";
setPosition(e);
boxRight.style.display = "block";
}
box.onmousemove = function(e){
e = e || window.event;
setPosition(e);
}
box.onmouseleave = function(e){
e = e || window.event;
mark.style.display = "none";
boxRight.style.display = "none";
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
闭包是一个拥有许多变量和绑定了这些变量的环境表达式（通常是一个函数），因而这些变量也是环境表达式的一部分。2010-12-12
鼠标滚轮滚动控制图片或者文字的大小，例如此类的转动鼠标滚轮实现缩放等等交互效果中，会用到 Mousewheel 事件，感兴趣的朋友可以了解下2013-11-11
有过相关经验的朋友都知道，Jscript的效率毕竟有限，在数组中查找数据时如果用常规的算法来做执行起来会很慢。2008-07-07
一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
经常性的会需要使用表格显示一些东西，当表格比较大的时候一眼望去脑袋可能会有些晕，经常性的因为没看准行而出现误操作，一般解决办法是交替行变行或者鼠标划过行变色2008-09-09
这篇文章主要介绍了Webpack优化-缩小文件搜索范围的相关知识，文中较详细的给大家介绍了可以优化的途径,需要的朋友可以参考下2017-12-12
在element-ui的el-tree组件中用render函数生成el-button的实例代码
这篇文章主要介绍了在element-ui的el-tree组件中用render函数生成el-button 的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
今天小编就为大家分享一篇关于js变量声明var使用与不使用的区别详解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
JavaScript 对象新增方法defineProperty与keys的使用说明
这篇文章主要介绍了JavaScript对象新增方法defineProperty与keys的使用说明,文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-09-09
这篇文章主要给大家介绍了关于setTimeout与setInterval区别的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
这篇文章主要介绍了JavaScript实现一个电子小蜘蛛,具体的样子就是让它会跟随着我们的鼠标进行移动,那么我们如何实现这样的效果呢,下面来详细讲解实现方法,需要的朋友可以参考下2024-10-10
最新评论