摘要：这个听了几遍还是不很明白，感觉好复杂，jq的基础还是太差了，要多补补。按老师的代码重新写了一遍，中间还调试好多次，很多次输出未果。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &n
这个听了几遍还是不很明白，感觉好复杂，jq的基础还是太差了，要多补补。按老师的代码重新写了一遍，中间还调试好多次，很多次输出未果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿天猫商城图片放大镜效果</title>
<link rel="shortcut icon" href="static/images/logo.png" type="image/x-icon" />
<link rel="stylesheet" href="static/css/style.css" type="text/css">
<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript">
$(function() {
//放大的窗口加载时隐藏
$('#big').hide()
//鼠标移到图片上的相关操作
$('#normal').mouseover(function() {
//透明图层的位置，跟随鼠标移动函数里面加入参数有利于使用这个函数
//pageX() 属性是鼠标指针的位置，相对于文档的左边缘。
$(this).mouseover(function(mp){
$('#show').css({
'left':mp.pageX-$('#show').width()/2,
'top':mp.pageY-$('#show').height()/2
})
//console.log(mp.pageX)
})
$('#show').show()
$('#big').show()
//绑定鼠标在normal中移动事件
$('#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(photo) {
$('#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>
批改老师：韦小宝批改时间：2019-02-21 17:25:35
老师总结：写的很不错 jQuery相对于js而言要简单多了 要多练习多练习!!!
