简介
网上有许多放大镜的jquery的插件，但是用着不是那么得心应手，现在一页代码实现一个放大镜功能，如果需要附加的功能可以手动修改，原理都在注释里
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.small {
margin-left:40px;
margin-top:50px;
width: 150px;
height: 150px;
/*border: 2px solid yellow;*/
}
.small>img {
width: 150px;
height: 150px;
}
.slider {
width: 50px;
height: 50px;
background: rgba(180,180,135,0.3);
position: absolute;
display: none;
}
#big {
//设置为固定大小;
width: 200px;
height: 200px;
position: absolute;
/* border: 2px solid red;*/
overflow: hidden;
display: none;
}
</style>
</head>
<body>
<!--缩略图-->
<div class="small">
<img src="thumb.jpg" />
<!--放大镜,在原图不上的小块-->
<div class="slider"></div>
</div>
<!--放大镜区域，大图，设置为none隐藏-->
<div id="big">
<img id="bigImg" src="big.jpg" />
</div>
even.clientX<input type="text" value="0" id="test" /><br/>
even.clientY<input type="text" value="0" id="test1" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var small = $(".small")[0];
var slider = $(".slider")[0];
var big = document.getElementById("big");//试一试js获取
var bigImg = document.getElementById("bigImg");
//让slider跟随鼠标移动.给小的方块绑定事件
$(".small").mousemove(function(e) {
var even = e || event; //兼容火狐浏览器
var x = even.clientX - small.offsetLeft - slider.offsetWidth/2;
var y = even.clientY - small.offsetTop - slider.offsetHeight/2;
//测试even.clientX和even.clientY
$("#test").val(even.clientX);
$("#test1").val(even.clientY);
//水平方向的最大值
var maxX = small.clientWidth - slider.clientWidth;
//竖直方向的最大值
var maxY = small.clientHeight - slider.clientHeight;
if(x<0){
//相当于超出左侧,超出左侧时,拉回
x=0;
}
//超出右侧时拉回
if(x>maxX){
x = maxX;
}
//顶部超出
