要想实现商品图片放大效果很简单，只需要使用一个jquery插件：jquery-zoom.js就能实现。
jquery实现的商品图片放大镜代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>jQuery商品图片放大镜</title>
<style>
.zoom {
display:inline-block;
position: relative;
}
.zoom img {
display: block;
}
.zoom img::selection { background-color: transparent; }
</style>
<script src='https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="https://cdn.staticfile.org/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<script>
$(document).ready(function(){
$('#ex1').zoom();
});
</script>
</head>
<body>
<div class='zoom' id='ex1'>
<img src='https://www.zhiboblog.com/wp-content/uploads/2023/06/daisy.jpg' width='555' height='320' alt=''/>
</div>
</body>
</html>
<html>
<head>
<meta charset='utf-8'/>
<title>jQuery商品图片放大镜</title>
<style>
.zoom {
display:inline-block;
position: relative;
}
.zoom img {
display: block;
}
.zoom img::selection { background-color: transparent; }
</style>
<script src='https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="https://cdn.staticfile.org/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<script>
$(document).ready(function(){
$('#ex1').zoom();
});
</script>
</head>
<body>
<div class='zoom' id='ex1'>
<img src='https://www.zhiboblog.com/wp-content/uploads/2023/06/daisy.jpg' width='555' height='320' alt=''/>
</div>
</body>
</html>
使用的时候需要注意：img外层div必须是inline-block，不然图片放大的时候会超出div
