简单2:1的放大
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
display: block;
}
#pic{
width: 200px;
height: 160px;
border: 3px solid #ccc;
position: relative;
float: left;
}
#pic img{
width: 200px;
height: 160px;
}
.mirror{
width: 100px;
height: 80px;
background: gold;
opacity: .5;
position: absolute;
left: 0;
top: 0;
display: none;
}
#bigbox{
width: 200px;
height: 160px;
float: left;
border: 3px solid #ccc;
overflow: hidden;
position: relative;
}
#bigbox img{
position: absolute;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(‘#pic‘).on({
mousemove:function(e){
$(‘.mirror‘).css(‘display‘,‘block‘)
//获取当前鼠标按下的位置相对于box的偏移值
var _left = e.clientX - $(‘#pic‘).offset().left - $(‘.mirror‘).width()/2;
var _top = e.clientY - $(‘#pic‘).offset().top - $(‘.mirror‘).height()/2;
//判断不能超出边界
if(_left<0){
_left = 0
}
if(_left>=$(‘#pic‘).width() - $(‘.mirror‘).width()){
_left=$(‘#pic‘).width() - $(‘.mirror‘).width()
}
if(_top<0){
_top = 0
}
if(_top>=$(‘#pic‘).height() - $(‘.mirror‘).height()){
_top = $(‘#pic‘).height() - $(‘.mirror‘).height()
}
//在box中移动鼠标，改变放大镜的位置
($(‘.mirror‘)).css({‘left‘:_left,‘top‘:_top})
//根据放大镜的位置，算出右侧大图应该显示的部分
$(‘#img1‘).css({‘left‘:-$(‘.mirror‘).position().left * 2,‘top‘:-$(‘.mirror‘).position().top * 2})
},
//鼠标移出后，放大镜隐藏
mouseleave:function(){
$(‘.mirror‘).css(‘display‘,‘none‘)
}
})
})
</script>
</head>
<body>
<div id="box">
<div id="pic">
<img src="img/6.jpg"/>
<p class="mirror"></p>
</div>
<div id="bigbox">
<img id="img1" src="img/6.jpg"/>
</div>
</div>
</body>
</html>
时间： 2025-01-17 22:42:43