web页面图片放大

最新推荐文章于 2022-12-06 10:30:33 发布

IT小浣熊

最新推荐文章于 2022-12-06 10:30:33 发布

阅读量3.5k

点赞数

分类专栏：日常小计文章标签： jquery

本文链接：https://blog.youkuaiyun.com/qq_43225978/article/details/103585310

版权

本文探讨了两种实现web页面图片放大的方法，并重点介绍了使用jQuery插件Viewer.js来实现图片查看的详细步骤，包括如何引入js文件及插件的基本语法和下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- - 图片放大方式一
  - 图片放大方式二

图片放大方式一

借鉴于 https://blog.youkuaiyun.com/Lxinccode/article/details/80353060

<div class="evidenceImgDiv">
	<img src="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%99%BE%E5%BA%A6%E5%9B%BE%E7%89%87&hs=2&pn=2&spn=0&di=192500&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3190441126%2C995644236&os=1454830399%2C2300565235&simid=4177018013%2C777657142&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E7%99%BE%E5%BA%A6%E5%9B%BE%E7%89%87&objurl=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb1cce6f996734bdbb9b3fb9ef7705deabc980e35493b-ysf8BZ_fw658&fromurl=ippr_z2C%24qAzdH3FAzdH3Fi7wkwg_z%26e3Bv54AzdH3FrtgfAzdH3F80abl000mdAzdH3F&gsm=&islist=&querylist=" border="5px" onclick="clickImgToEnlarge(this);"/>
</div>
<div id="enlargeImgDiv" style="cursor:pointer;z-index: 1111">
	<img src="" border="5px" id="enlargeImg"/>
</div>
<script>
function clickImgToEnlarge(obj) {
   
	//点击评论图片放大
	$('#enlargeImgDiv').show();
	$('#enlargeImg').attr('src',obj.src);
	//获取图片大小
	var widthHtml = $('#enlargeImg').width