abstrak：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圖片放大效果jq</title> <script src="jquery-3.3.1.min.js" typ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片放大效果jq</title>
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<style>
body{margin:0;padding:0;}
body > div {float:left;width:450px;height:450px;border:1px solid #999;overflow: hidden;margin:20px 20px;border-radius:3px;box-shadow: 1px 0px 6px 1px #999;position: relative;cursor: pointer;}
/* 預覽 */
.leftBox{position: absolute;background:rgba(111,111,111,.5);width:150px;height:150px;top:0;border-radius:4px;}
/* 左邊 */
.left img {width:100%;height:100%;}
/* 預覽圖黑子 */
.leftBox{transition: all .08s linear;}
/* 右邊 */
.right img {width:1350px;height:1350px;position: absolute;top:0;left:0;transition: all .5s linear;}
</style>
</head>
<body>
<!-- 左邊的預覽圖 -->
<div class="left">
<img src="images/5.jpg" >
<!-- 預覽 -->
<div class="leftBox"></div>
</div>
<!-- 右邊的放大圖 -->
<div class="right">
<img src="images/5.jpg" >
</div>
<script type="text/javascript">
$(function(){
$('.left').hover(function(e){
},function(){
$('.leftBox').css('display','none');
})
$('.left').on('mousemove',function(e){
//設置盒子
$('.leftBox').css({
top : e.pageY - 20 - 75 + 'px' ,
left : e.pageX - 20 - 75 + 'px',
display : 'block'
})
let lT = parseInt($('.leftBox').css('top'));
let lL = parseInt($('.leftBox').css('left'));
//超出邊界后,返回
if(lT > 0 && lT < 300 ){
$('.right img').css('top',-lT *3 + 'px');
}
if(lL >0 && lL<300){
$('.right img').css('left',-lL *3 + 'px');
}
})
})
</script>
</body>
</html>
Guru membetulkan：滅絕師太Masa pembetulan：2019-02-11 09:44:04
Rumusan guru：布局和js代碼都要知道使用的意義所在,不可以囫圇吞棗哦