jQuery圖片縮放插件smartZoom使用實(shí)例詳解

更新時(shí)間：2017年08月25日 09:23:54 作者：joannau

本文通過(guò)實(shí)例代碼給大家簡(jiǎn)單介紹了jQuery圖片縮放插件smartZoom使用以及遇到問(wèn)題的解決方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧

e-smart-zoom-jquery.js插件，下載地址及示例：https://github.com/e-smartdev/smartJQueryZoom

插件描述：通過(guò)將鼠標(biāo)懸停在圖片上，滾動(dòng)鼠標(biāo)滾輪即可實(shí)現(xiàn)圖片的放大或者縮小效果。

smartZoom使用

舉個(gè)栗子，上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>joannau</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .imgCon {
      width: 800px;
      height: 500px;
      margin: 40px auto;
      border: 2px solid #000;
    }
    .imgDiv {
      width: 100%;
      height: 100%;
    }
    .imgCon img{
      width: 100%;
    }
  </style>
</head>
<body>
<div class="imgCon">
  <div class="imgDiv">
    <img src="./assets/zoomSmall.jpg" alt="">
  </div>
</div>
<script src="../src/jquery-1.11.0.min.js"></script>
<script src="../src/e-smart-zoom-jquery.js"></script>
<script>
  $(function () {
    $(".imgCon img").smartZoom()
  })
</script>
</body>
</html>

直接對(duì)img對(duì)象使用smartZoom方法即可。

查看效果：

縮放

完美，這就成功使用了。

但很多人會(huì)遇見(jiàn)使用smartZoom圖片位置偏移的問(wèn)題，效果如下：

邊框不見(jiàn)，再看代碼會(huì)發(fā)現(xiàn)：

原來(lái)是top和left作祟。此時(shí)解決問(wèn)題的重點(diǎn)就是在img圖像外，嵌套一個(gè)div容器。如下：

<div class="imgDiv">
    <img src="./assets/zoomSmall.jpg" alt="">
  </div>

此時(shí)，便能解決位置偏移問(wèn)題。

其他API:

// 方法中可以通過(guò)設(shè)置top，left等參數(shù)來(lái)指定圖片初始參數(shù)；
$(".imgCon img").smartZoom({
      'left': '50px'
    })
// 通過(guò)傳入‘destroy‘來(lái)取消縮放；
 $(".imgCon img").smartZoom('destroy')

總結(jié)

以上所述是小編給大家介紹的jQuery圖片縮放插件smartZoom使用實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

jQuery中隱藏元素的hide方法及說(shuō)明
這篇文章主要介紹了jQuery中隱藏元素的hide方法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Jquery實(shí)現(xiàn)簡(jiǎn)單的輪播效果(代碼管用)
這篇文章主要介紹了Jquery實(shí)現(xiàn)簡(jiǎn)單的輪播效果(代碼管用) 的相關(guān)資料,需要的朋友可以參考下
2016-03-03
jquery取消選擇select下拉框示例代碼
本篇文章主要是對(duì)jquery取消選擇select下拉框示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
jQuery+HTML5實(shí)現(xiàn)手機(jī)搖一搖換衣特效
經(jīng)常我們玩微信都會(huì)用到查到附近的人，都是在app上實(shí)現(xiàn)手機(jī)搖一搖的功能?，F(xiàn)在，我們將此技術(shù)搬移到手機(jī)web上，供大家學(xué)習(xí)，有需要的小伙伴可以參考下。
2015-06-06
jQuery中的一些小技巧
本文主要總結(jié)了jQuery中的一些小技巧。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
jquery中.add()的使用分析
本篇文章介紹了，在jquery中.add()的使用分析。需要的朋友參考下
2013-04-04
使用JQuery自動(dòng)完成插件Auto Complete詳解
這篇文章主要介紹了使用JQuery自動(dòng)完成插件Auto Complete詳解,使用JQuery自動(dòng)完成插件，更新現(xiàn)有圖書(shū)列表頁(yè)面上的搜索，當(dāng)用戶鍵入的時(shí)候立即顯示結(jié)果。,需要的朋友可以參考下
2019-06-06
jQuery固定元素插件scrolltofixed使用指南
ScrollToFixed (jquery Fixed plugin)能夠讓網(wǎng)頁(yè)的導(dǎo)航或表頭等固定在頂部或底部，讓用戶更方便的操作或查看信息。除了導(dǎo)航和表頭，也可以固定其他內(nèi)容，比如廣告、返回頂部等等。
2015-04-04
JS在IE下缺少標(biāo)識(shí)符的錯(cuò)誤
今天在使用一個(gè)jQuery的插件時(shí)，發(fā)現(xiàn)在IE下總報(bào)錯(cuò)，但在Firefox下就很正常，所報(bào)的錯(cuò)誤就是：缺少標(biāo)識(shí)符！
2014-07-07
分享jQuery封裝好的一些常用操作
本文是一些jquery進(jìn)行封裝實(shí)現(xiàn)的常用的操作，對(duì)平常學(xué)習(xí)工作很實(shí)用，有需要的朋友可以參考下。
2016-07-07