效果圖
效果圖
文件夾結(jié)構(gòu)
-
HTML/CSS/JS 代碼分別保存在 index.html / main.css / main.js 文件中，而main.css / main.js 文件分別保存在 css 和 js 文件夾下；素材圖片名為 pic01.jpg 保存在 images 文件夾下。具體情況如下圖如示
文件夾結(jié)構(gòu)示意圖
素材
素材圖片
源代碼
HTML代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>放大鏡效果</title>
<!--css文件保存在css文件夾下-->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="box">
<div class="show">
<!-- 原圖 -->
<!--圖片素材保存在images文件夾下-->
<img src="images/pic01.jpg" alt="">
<!-- 滑塊 -->
<span class="move"></span>
</div>
<!-- 放大區(qū)域 -->
<div class="zoom">
<img class="big" src="images/pic01.jpg" alt="">
</div>
</div>
<!--js文件保存在js文件夾下-->
<script src="js/main.js"></script>
</body>
</html>
CSS代碼
/* 清除默認(rèn)樣式 */
*{
margin: 0;
padding: 0;
}
.box{
width: 450px;
height: 450px;
margin: 100px 0 0 300px;
border: 1px solid #eee;
position: relative;
}
.box img{
display: block;
}
/* 移動滑塊 */
.box .move{
width: 200px;
height: 200px;
background-color: rgba(0,0,0,0.3);
position: absolute;
left: 0;
bottom: 0;
/* 十字形指針 */
cursor: crosshair;
/* 一開始不出現(xiàn) */
display: none;
}
/* 放大區(qū)域 */
.box .zoom{
width: 450px;
height: 450px;
position: absolute;
background-color: #eeeeee;
left: 450px;
top: 0;
border: 1px solid red;
display: none;
overflow: hidden;
}
/* 大圖 */
.box .zoom img{
position: absolute;
left: 0;
top: 0;
}
JS代碼
// 獲取父容器，以及它的寬高
var box = document.querySelector(".box");
var boxWidth = box.offsetWidth;
var boxHeight = box.offsetHeight;
var show = document.querySelector(".show");
var showWidth = show.offsetWidth;
var showHeight = show.offsetHeight;
var move = document.querySelector(".move");
var moveWidth;
var moveHeight;
var zoom = document.querySelector(".zoom");
// 獲取大圖
var big = document.querySelector(".big");
// 寬高比例
var pixW;
var pixH;
// 鼠標(biāo)進入時，顯示move 和 zoom區(qū)域，并獲取move的寬高，
// 因為一開始move是隱藏的，那時獲取的寬高是0
show.onmouseenter = function(){
move.style.display = "block";
zoom.style.display = "block";
moveWidth = move.offsetWidth;
moveHeight = move.offsetHeight;
// 計算move 相對于show 的寬高比例
pixW = moveWidth/showWidth;
pixH = moveHeight/showHeight;
var zoomWidth = zoom.offsetWidth;
var zoomHeight = zoom.offsetHeight;
// 設(shè)置右邊大圖的尺寸
big.style.width = zoomWidth/pixW + "px";
big.style.height = zoomHeight/pixH + "px";
}
// 當(dāng)鼠標(biāo)離開 show 區(qū)域時，move 和 zoom 全部消失
show.onmouseleave = function(){
move.style.display = "none";
zoom.style.display = "none";
}
// 給show 添加mousemove 事件
show.onmousemove = function(event){
// 處理兼容性問題
event = event || window.event;
// 鼠標(biāo)相當(dāng)于瀏覽器窗口的坐標(biāo)
var cliX = event.clientX;
var cliY = event.clientY;
// show 區(qū)域(與box 尺寸相同)相當(dāng)于瀏覽器窗口的距離
var ol = box.offsetLeft;
var ot = box.offsetTop;
// 計算鼠標(biāo)在show 中的相對坐標(biāo)
var left = cliX-ol;
var top = cliY-ot;
// console.log(left,top);
// 控制滑塊移動的范圍
if(left<=(moveWidth/2)){
// 左邊
move.style.left = "0px";
}else if(left>=(showWidth-moveWidth/2)){
// 右邊
move.style.left = (showWidth-moveWidth)+"px";
}else{
move.style.left = left-(moveWidth/2)+"px";
}
if(top<=(moveHeight/2)){
// 上邊
move.style.top = "0px";
}else if(top>=(showHeight-moveHeight/2)){
// 下邊
move.style.top = (showHeight-moveHeight)+"px";
}else{
move.style.top = top-(moveHeight/2)+"px";
}
// 設(shè)置大圖的位置
// 注意大圖的移動方向是和move 相反的
big.style.left = -parseFloat(move.style.left)/pixW + "px";
big.style.top = -parseFloat(move.style.top)/pixH + "px";
}
最后
本人水平有限，如有錯誤或疏漏之處，歡迎讀者朋友在下方評論
