HTML5+CSS3+JavaScript实现放大镜功能
预览
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>放大</title>
</head>
<style>
* {
box-sizing: border-box;
border: 0px;
padding: 0px;
margin: 0px;
}
.box {
background-image: url(https://img14.360buyimg.com/n0/jfs/t1/94207/33/20990/176816/6201dec4E37ffda91/5cff1795baf37b01.jpg);
background-size: 100% 100%;
float: left;
border: 5px solid black;
}
.fdj {
visibility: hidden;
position: relative;
background-color: aqua;
opacity: 0.1;
}
.out_box {
visibility: hidden;
margin-left: 50px;
overflow: hidden;
float: left;
border: 5px solid black;
}
.big_box {
position: relative;
background-image: url(https://img14.360buyimg.com/n0/jfs/t1/94207/33/20990/176816/6201dec4E37ffda91/5cff1795baf37b01.jpg);
background-size: 100% 100%;
}
</style>
<body>
<div class="box" id="box">
<div class="fdj" id="fdj"></div>
</div>
<div class="out_box" id="out_box">
<div class="big_box" id="big_box"></div>
</div>
</body>
<script>
var box = document.getElementById("box");
var fdj = document.getElementById("fdj");
var out_box = document.getElementById("out_box");
var big_box = document.getElementById("big_box");
// 普通图片宽高大小 box
var small_width = 400;
var small_height = 400;
// 放大镜宽高
var fdj_width = 200;
var fdj_height = 200;
// 放大div的宽高大小 out_box;
var out_width = 400;
var out_height = 400;
// 放大后图片宽高 big_box
var big_width = 800;
var big_height = 800;
// 放大倍率
var width_beilv = -1 * (big_width / small_width);
var height_beilv = -1 * (big_height / small_height);
// 重新调整布局
//box
box.style.width = small_width + "px";
box.style.height = small_height + "px";
//fdj
fdj.style.width = fdj_width + "px";
fdj.style.height = fdj_height + "px";
//out_box
out_box.style.width = out_width + "px";
out_box.style.height = out_height + "px";
//big_box
big_box.style.width = big_width + "px";
big_box.style.height = big_height + "px";
box.onmouseover = function (e) {
fdj.style.visibility = "visible";
out_box.style.visibility = "visible";
};
box.onmousemove = function (e) {
//用page而不用clien的原因是如果页面过长导致轮滑滚动，clien错位
var x = e.pageX - fdj_width / 2;
var y = e.pageY - fdj_height / 2;
x = x < 0 ? 0 : x > small_width - fdj_width ? small_width - fdj_width : x;
y = y < 0 ? 0 : y > small_height - fdj_height ? small_height - fdj_height : y;
fdj.style.left = x + "px";
fdj.style.top = y + "px";
big_box.style.left = width_beilv * x + "px";
big_box.style.top = height_beilv * y + "px";
};
box.onmouseout = function (e) {
fdj.style.visibility = "hidden";
out_box.style.visibility = "hidden";
};
</script>
</html>
评论 (0)