jQuery补充，模拟图片放大镜
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/fdj.css">
</head>
<body>
<div class="outer"> <!--放大镜主体div-->
<div class="small_box"> <!--放大镜小图区域-->
<div class="float"></div> <!--小图里的玻璃罩区域-->
<img src="img/small.jpg">
</div>
<div class="big_box"> <!--放大镜大图区域-->
<img src="img/big.jpg">
</div>
</div>
<script src="jquery/jquery.min.js"></script>
<script src="fdj.js"></script>
</body>
</html>
css
@charset "utf-8";
*{
margin: 0;
padding: 0;
}
.outer{ /*放大镜主体div*/
width: 350px;
height: 350px;
border:5px solid #0f68ee;
}
.outer .small_box{ /*放大镜小图区域*/
position: relative;
}
.outer .small_box .float{ /*放大镜小图区域里的玻璃罩*/
width: 175px;
height: 175px;
background-color: #ABC7E2;
opacity: 0.4;
position: absolute;
display: none;
}
.outer .big_box{ /*放大镜大图区域*/
width: 400px;
height: 400px;
border:5px solid #0f68ee;
overflow:hidden;
position: absolute;
top: 0;
left: 370px;
display: none;
}
.outer .big_box img{
position: absolute;
}
js
/**
* Created by admin on 2017/5/10.
*/
$(function () {
// 当鼠标悬浮到小图片区域的时候，执行鼠标悬浮事件
$(‘.outer .small_box‘).mouseover(function () {
$(‘.outer .small_box .float‘).css(‘display‘,‘block‘); //显示小图片区域里的玻璃罩
$(‘.outer .big_box‘).css(‘display‘,‘block‘); //显示大图片区域
});
//当前鼠标离开小图片区域的时候，执行鼠标离开事件
$(‘.outer .small_box‘).mouseout(function () {
$(‘.outer .small_box .float‘).css(‘display‘,‘none‘); //隐藏小图片区域里的玻璃罩
$(‘.outer .big_box‘).css(‘display‘,‘none‘); //隐藏大图片区域
});
// 当鼠标在小图片区域移动的时候，执行鼠标移动事件
$(‘.outer .small_box‘).mousemove(function (e) {
var _event = e || window.event; //接收事件里的event对象信息
var small_box_height = $(‘.outer .small_box‘).height(); //获取小图区域div的高度
var small_box_width = $(‘.outer .small_box‘).width(); //获取小图区域div的宽度
var float_height = $(‘.outer .small_box .float‘).height(); //获取小图区域里的玻璃罩高度
var float_width = $(‘.outer .small_box .float‘).width(); //获取小图区域里的玻璃罩宽度
var float_height_ban = $(‘.outer .small_box .float‘).height()/2; //获取小图区域里的玻璃罩一半高度
var float_width_ban = $(‘.outer .small_box .float‘).width()/2; //获取小图区域里的玻璃罩一半宽度
//换算玻璃罩滑动值
var mouse_left = _event.clientX - float_width_ban; //将鼠标点与左边边距，减去玻璃罩的一半，就是玻璃罩横向滑动值
var mouse_top = _event.clientY - float_height_ban; //将鼠标点与上边边距，减去玻璃罩的一百，就是玻璃罩纵向滑动值
if (mouse_left < 0){ //玻璃罩横向滑动值，如果小于0
mouse_left = 0; //将璃罩横向滑动值，设置为0
}else if (mouse_left >small_box_width - float_width){ //判断璃罩横向滑动值，如果大于了小图区域宽度减去玻璃罩宽度，说明璃罩横向滑动值向右已经超出了小图区域
mouse_left = small_box_width - float_width; //将璃罩横向滑动值，设置成小图区域宽度减去玻璃罩宽度，就是横向滑动值向右到头
}
if (mouse_top < 0){ //玻璃罩纵向滑动值，如果小于0
mouse_top = 0; //将璃罩纵向滑动值，设置为0
}else if (mouse_top >small_box_height - float_height){ //判断璃罩纵向滑动值，如果大于了小图区域高度减去玻璃罩高度，说明璃罩纵向滑动值向下已经超出了小图区域
mouse_top = small_box_height - float_height; //将璃罩纵向滑动值，设置成小图区域高度减去玻璃罩高度，就是纵向滑动值向下到头
}
$(‘.outer .small_box .float‘).css(‘left‘,mouse_left + ‘px‘); //获取到玻璃罩纵向滑动值
$(‘.outer .small_box .float‘).css(‘top‘,mouse_top + ‘px‘); //获取到玻璃罩横向滑动值
//换算大图滑动比例
//将大图片的宽度减去大图容器div宽度，除以小图容器div宽度减去玻璃罩宽度，等于大图反向横向滑动比例
var percentX = ($(‘.outer .big_box img‘).width()-$(‘.outer .big_box‘).width())/(small_box_width-float_width);
//将大图片的高度减去大图容器div高度，除以小图容器div高度减去玻璃罩高度，等于大图反向纵向滑动比例
var percentY = ($(‘.outer .big_box img‘).height()-$(‘.outer .big_box‘).height())/(small_box_height-float_height);
$(‘.outer .big_box img‘).css(‘left‘,-percentX*mouse_left+‘px‘); //反向横向滑动比例，除以玻璃罩横向滑动值，等于大图横向滑动值
$(‘.outer .big_box img‘).css(‘top‘,-percentY*mouse_top+‘px‘); //反向纵向滑动比例，除以玻璃罩纵向滑动值，等于大图纵向滑动值
});
});
时间： 2025-01-01 08:12:55