abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手風(fēng)琴</title> <link rel="stylesheet&q
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手風(fēng)琴</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){
//跟隨鼠標(biāo)移動(dòng)而移動(dòng)
$('.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')); //獲取當(dāng)前小box的top值
var hoverL = parseInt($('.hoverShow').css('left')); //獲取當(dāng)前小box的left值
$('.big').find('img').css({ //乘以倍數(shù)賦值給放大
'left':-hoverL*3+'px',
'top':-hoverT*3+'px',
})
})
},function(){
$('.hoverShow').hide();
$('.big').hide()
})
})
</script>
</body>
</html>思路差不多
Correcting teacher：滅絕師太Correction time：2018-11-16 13:48:22
Teacher's summary：思路理順了，做起來就簡(jiǎn)單，完成的不錯(cuò)，繼續(xù)保持！