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

2016-09-20 18:06 260 查看
<!DOCTYPE html>
<html lang="en">
<head>
<!--首先要把HTML结构和样式写好,这里大家肯定都明白,不作具体解释-->
<!--所谓的放大镜其实也是一个假象,即它是2张图片而已,

基本思路:
小图片我们给他写好样式,大图片我们让他在小图片的右侧隐藏,一旦镜子(鼠标)进入小图片,大图片出现
并且能够在相应位置放大,例子中我们的大图片尺寸就是小图片尺寸的3倍,实际工作也是如此-->
<meta charset="UTF-8">
<title>放大镜</title>
<style>
html,body,div,img {
margin: 0;
padding: 0;
font-family: "微软雅黑";
-webkit-user-select: none;
}
img {
border: none;
display: block;
}
#box1,#box2 {
position: absolute;
width: 300px;
height: 300px;
top: 50px;
box-shadow: 4px 4px 10px 3px darkblue;
}
#mark {
display: none;
position: absolute;
width: 100px;
height: 100px;
top:0;
left: 0;
background-color: silver;
opacity: 0.7;
filter: alpha(opacity=70);
cursor: move;
border-radius:50% ;
}
#box1 {
left: 60px;
}
#box2 {
display: none;
left: 380px;
overflow: hidden;
border-radius: 50%;
}
#box1 img {
width: 100%;
height: 100%;
}
#box2 img {
width: 300%;
height: 300%;
}

</style>
</head>
<body>
<div id="box1">
<!--这是小图-->
<img src="img/iphone.jpg" alt="">
<!--这个mark就是鼠标位置,也就是进入图片的时候那个镜子-->
<div id="mark"></div>
</div>

<div id="box2">
<!--这个是大图-->
<img src="img/iphone_big.jpg" alt="">
</div>

<script src="js/utils.js"></script>
<script>
//首先我们要获取元素
var box1=document.getElementById("box1");
var mark=document.getElementById("mark");
var box2=document.getElementById("box2");
var oImg=box2.getElementsByTagName("img")[0];

//封装一个函数,实现放大镜效果
function bigImg(e) {
//首先我们要去判断事件源,也就是e
e=e||window.event;
//我们要获取这个小图片所在的元素距离body的距离,也就是一个left 和top值
//---------->其中utils是我自己封装的函数
//因为我们要实现鼠标进入这个小图片的时候再出现镜子,不进入就不会出现,
// 所以就要进行判断,也就是要求出它距离body的最大值最小值.
//下面的 l  t 就是它的最小值
var box1Offent=utils.offset(box1);

//client 是距离浏览器边框(可视区域)的距离
//这里的offsetWidth就是这个mark(镜子)的宽度,同理offsetHeight就是高度.
//这里为什么除以2那?是因为我们不除以2的话,事件源也就是鼠标就在这个镜子的左上角,并不美观
//我们要让他在镜子的中心,所以宽高各减去一半,这样我们的鼠标就会在mark的中间了
var l=e.clientX-box1Offent.left-mark.offsetWidth/2;
var t=e.clientY-box1Offent.top-mark.offsetHeight/2;
utils.css(mark,{left:l,top:t});
//边界判断
//最小的我们知道了,那么最大的就是用镜子父元素的宽高减去镜子的宽高.
//大家仔细想想是不是这么个道理??
var minL=0,minT=0;
var maxL=box1.offsetWidth-mark.offsetWidth;
var maxT=box1.offsetHeight-mark.offsetHeight;

//然后我们对镜子的边界进行判断,同时得到l  t 以后将他赋给大图片;
//注意大图片的值 这时候要是他的3倍(因为我们前面说了,大图是小图的3倍)
l=l<=minL?l=minL:(l>=maxL?maxL:l);
t=t<=minT?t=minT:(t>=maxT?maxT:t);
utils.css(mark,{left:l,top:t});
utils.css(oImg,{marginLeft:l*-3,marginTop:t*-3});
}

//给镜子的父元素绑定事件,同时这里也可以利用JQ去写会更方便
box1.onmouseenter=function (e) {
utils.css(mark,{display:"block"});
utils.css(box2,"display","block");
bigImg(e);
};
box1.onmousemove=function (e) {
utils.css(mark,{display:"block"});
utils.css(box2,"display","block");
bigImg(e);
};
box1.onmouseleave=function (e) {
utils.css(mark,{display:"none"});
utils.css(box2,"display","none");
};

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： JS H5
相关文章推荐
新的分享
章节导航