摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手风琴</title> <link rel="stylesheet&q
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手风琴</title>
<link rel="stylesheet" href="static/css/style5.css">
<link rel="stylesheet" href="static/css/animate.min.css">
<link rel="shortcut icon" href="static/images/logo1.png" type="image/x-icon">
<script type="text/javascript" src="static/js/jquery.js"></script>
<style>
</style>
</head>
<body>
<div class="box">
<img src="static/images/5.1.jpg" alt="">
<div class="hoverShow"></div>
</div>
<div class="big">
<img src="static/images/5.1.jpg"" alt="">
</div>
<script type="text/javascript">
$(function(){
$('.big').hide();
$('.box').hover(function(){ //给的是absolute
$('.hoverShow').show();
$('.big').show();
$('.box').mousemove(function(e){
//跟随鼠标移动而移动
$('.hoverShow').css({
'top':e.pageY-20-$('.hoverShow').height()/2, //减去偏移 再减去宽度高度一半
'left':e.pageX-20-$('.hoverShow').width()/2
})
// console.log(e.pageY);
// console.log(20+$('.box').height()-$('.hoverShow').height()/2);
// alert(hoverT);
var maxT = 20+$('.box').height()-$('.hoverShow').height()/2; //获取最大偏移高度
var maxW = 20+$('.box').width()-$('.hoverShow').width()/2; //获取最大偏移宽度
var minT = 20+$('.hoverShow').height()/2; //获取最小偏移高度
var minW = 20+$('.hoverShow').width()/2; //获取最小偏移宽度
var boxt_hovert = $('.box').height()-$('.hoverShow').height(); //获取大小box高度差
var boxl_hoverl = $('.box').width()-$('.hoverShow').width(); //获取大小box宽度差
// console.log(maxT);
if(e.pageY>maxT){
$('.hoverShow').css('top',boxt_hovert+'px'); //大于最大高度 值为大小box的高度差
}
if(e.pageX>maxW){
$('.hoverShow').css('left',boxl_hoverl+'px'); //大于最大宽度 值为大小box的宽度差
}
if(e.pageY<minT){
$('.hoverShow').css('top','0px'); //小于最小高度 值为0
}
if(e.pageX<minW){
$('.hoverShow').css('left','0px'); //小于最小宽度 值为0
}
var hoverT = parseInt($('.hoverShow').css('top')); //获取当前小box的top值
var hoverL = parseInt($('.hoverShow').css('left')); //获取当前小box的left值
$('.big').find('img').css({ //乘以倍数赋值给放大
'left':-hoverL*3+'px',
'top':-hoverT*3+'px',
})
})
},function(){
$('.hoverShow').hide();
$('.big').hide()
})
})
</script>
</body>
</html>思路差不多
批改老师：灭绝师太批改时间：2018-11-16 13:48:22
老师总结：思路理顺了，做起来就简单，完成的不错，继续保持！
