1. <p id="ijjhg"></p>
      <acronym id="ijjhg"></acronym>

    2. <p id="ijjhg"></p>
      <table id="ijjhg"><ruby id="ijjhg"><mark id="ijjhg"></mark></ruby></table>
      0712-2888027 189-8648-0214
      微信公眾號

      孝感風信網絡科技有限公司微信公眾號

      當前位置:主頁 > 技術支持 > Javascript/JQuery > Magnifier圖片放大鏡插件 支持多種瀏覽器

      Magnifier圖片放大鏡插件 支持多種瀏覽器

      時間:2024-07-13來源:風信官網 點擊: 1816次
      Magnifier實現一個圖片放大鏡的效果,可應用于商品圖片頁等對圖片細節要求高的地方,使用jQuery插件magnifier可以簡單的實現一個圖片放大鏡的功能。

      可以使用鼠標滾輪放大縮小圖片。
      可以通過js或data屬性來設置選項。
      一次調用可以附加多張圖片。
      用戶可以自定義鼠標進入、離開、移動事件。
      加載大圖片時可以顯現等待文本。

      瀏覽器支持

      Chrome 24
      Firefox 18
      IE 7, 8, 9, 10
      Safari for Windows 5.1.7

      演示示例:http://photino.github.io/amazeui-magnifier/docs/demo.html

      基本使用方法

      首先引入css文件

      <link rel="stylesheet" type="text/css" href="magnifier.css">
      <div>
          <a class="magnifier-thumb-wrapper" href="big.jpg">
              <img id="thumb" src="thumb.jpg">
          </a>
          <div class="magnifier-preview" id="preview" style="width: 200px; height: 133px">Starry Night Over The Rhone<br>by Vincent van Gogh</div>
      </div>

      調用插件

      引入js文件

      <script type="text/javascript" src="Event.js"></script>
      <script type="text/javascript" src="Magnifier.js"></script>
      <script type="text/javascript">
        var evt = new Event(),
        m = new Magnifier(evt);
        m.attach({
          thumb: '#thumb',
          large: 'big.jpg',
          largeWrapper: 'preview'
      });
      </script>

      可用參數

      • thumb(string):ID or class of the image element to magnify preceded by "#" or "."
      • large(string):large image URL
      • largeWrapper(string):ID of the element where large image will be appended
      • zoom(int):initial zoom level
      • zoomable(bool):enable zoom in / out using mouse wheel
      • onthumbenter(callback):function to call on thumbnail enter event
      • onthumbmove(callback):function to call on thumbnail move event
      • onthumbleave(callback):function to call on thumbnail leave event
      • onzoom(callback):function to call on zoom event

      更多信息請參看:https://github.com/mark-rolich/Magnifier.js

      欄目列表
      推薦內容
      熱點內容
      展開
      中文字幕第二页在线天堂中文_中文字幕制服丝袜在线观看_美女胸禁止18以下看免费国产_中日韩人妻一级毛片