jquery-zoom图片放大处理
jquery-zoom图片放大处理
luckxz999 发表于1年前
jquery-zoom图片放大处理
  • 发表于 1年前
  • 阅读 46
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: jquery图片放大插件

第一步:引入相关文件

jQuery主文件:
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
zoom主文件
<script src="/jquery-zoom/content_zoom.js" type="text/javascript"></script>
<link rel="stylesheet" href="/jquery-zoom/common.css" type="text/css" />

第二步:HTML组织
<div id="largeDiv" style="display:none;"><img src="${largeImagePath}" /></div>
<a class="img" href="#largeDiv"><img style="height: 100px;width: 100px;" src="${thubmImagePath}"></a>

largeDiv为大图展示;<a class="img">展示缩略图。

注href="#largeDiv"必须只想所对应大图div的ID。

第三步:js初始化

$('a.img').fancyZoom({scaleImg: true, closeOnClick: true});

共有 人打赏支持
粉丝 0
博文 5
码字总数 8084
×
luckxz999
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: