JavaScript-用JS实现一个图片放大预览效果
很多电商网站上都有这种功能，如果用JS该如何去实现呢
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
很多电商网站上都有这种功能，如果用JS该如何去实现呢
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论（3）
用jquery的插件：jquery.thumbhover可以实现，给个例子：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="jquery.thumbhover.js"></script>
<script>
$(function(){
$("img[src*='_s.jpg']").thumbPopup({
imgSmallFlag: "_s",
imgLargeFlag: "_l"
});
});
</script>
</head>
<body>
<table align="center" style="margin-top: 300px;">
<tr>
<td><img src="example1_s.jpg" /></td>
<td><img src="example2_s.jpg" /></td>
<td><img src="example3_s.jpg" /></td>
</tr>
<tr>
<td><img src="example4_s.jpg" /></td>
<td><img src="example5_s.jpg" /></td>
<td><img src="example6_s.jpg" /></td>
</tr>
</table>
</body>
</html>
16 款基于jQuery的图片缩放效果插件推荐
http://www.iteye.com/news/23754
基本原理就是，设置img元素的宽高可直接影响显示出来的图片缩放比。再把这个img套到一个div里，设置div的宽高，设置div的overflow为hidden，则这个img只能露出div这一部分，div之外的不会显示出来。
然后通过调整img在div里的位置，可以改变显示的部分。这个可以通过改img的margin或把div的position设置为relative，img的position设置为absolute，然后通过改img的left，top值。