摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿天猫商城图片放大镜效果</t
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿天猫商城图片放大镜效果</title>
<link rel="shortcut icon" href="static/images/logo.png" type="image/x-icon" />
<style type="text/css">
*{ margin:0;padding:0; }
#normal{width: 450px;height: 450px;border: 1px solid #000;position: fixed;top: 20px;left: 20px;}
#normal img{width: 100%;height: 100%;}
#show{width: 150px;height: 150px;background: #754930;opacity: 0.4;position: absolute;display: none;}
#big{width: 450px;height: 450px;border: 1px solid #000;position: relative;left: 520px;top: 20px;overflow: hidden;}
#big>img{position: absolute;width: 1350px;height: 1350px;}
</style>
<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#big').hide()
$('#normal').mouseover(function(){
$('#show').show()
$('#big').show()
$(this).mousemove(function(yd){
$('#show').css({
'left':yd.pageX-$('#show').width()/2,
'top':yd.pageY-$('#show').height()/2
})
})
$('#normal').mousemove(function(e){
var x=e.clientx
var y=e.clienty
var dx=$('#normal').offset().left;
var dy=$('#normal').offset().top;
var sx=x-dx
var sy=y-dy
var mw=$('#show').width()/2
var mh=$('#show').height()/2
$('#show').css({left:sx-mw+'px',top:sy-mh+'px'})
var lw=$('#show').position().left;
var lh=$('#show').position().top;
var maxW=$('#normal').width()-$('#show').width()
var maxH=$('#normal').height()-$('#show').height()
if(lw<=0){$('#show').css('left','0px')}
if(lw>=maxW){$('#show').css('left',maxW+'px')}
if(lh<=0){$('#show').css('top','0px')}
if(lh>=maxH){$('#show').css('top',maxH+'px')}
var lw=$('#show').position().left;
var lh=$('#show').position().top;
var newX=lw*3
var newY=lh*3
$('#big').find('img').css({
'left':-newX+'px',
'top':-newY+'px'
})
})
})
$('#normal').mouseleave(function(){
$('#show').hide()
$('#big').hide()
})
})
</script>
</head>
<body>
<div id="normal">
<img src="static/images/5.jpg">
<div id="show"></div>
</div>
<div id="big">
<img src="static/images/5.jpg">
</div>
</body>
</html>```javascript
//跟随鼠标移动
$(this).mousemove(function(yd){
$('#show').css({
'left':yd.pageX-$('#show').width()/2,
'top':yd.pageY-$('#show').height()/2
})
})$('#normal').mousemove(function(e){
//鼠标位置
var x=e.clientx
var y=e.clienty
//偏移位置
var dx=$('#normal').offset().left;
var dy=$('#normal').offset().top;
//相对位置
var sx=x-dx
var sy=y-dy
//宽高
var mw=$('#show').width()/2
var mh=$('#show').height()/2
//小框跟着移动的距离
$('#show').css({left:sx-mw+'px',top:sy-mh+'px'})
//小框限制范围
var lw=$('#show').position().left;
var lh=$('#show').position().top;
var maxW=$('#normal').width()-$('#show').width()
var maxH=$('#normal').height()-$('#show').height()
if(lw<=0){$('#show').css('left','0px')}
if(lw>=maxW){$('#show').css('left',maxW+'px')}
if(lh<=0){$('#show').css('top','0px')}
if(lh>=maxH){$('#show').css('top',maxH+'px')}
//小框偏移位置
var lw=$('#show').position().left;
var lh=$('#show').position().top;
var newX=lw*3
var newY=lh*3
$('#big').find('img').css({
'left':-newX+'px',
'top':-newY+'px'
})
})```
批改老师：灭绝师太批改时间：2018-11-27 09:59:30
老师总结：你这个作业速度，有点快的离谱啊，快是好事情，知识点掌握了么？
