<ruby id="eitmy"></ruby>
<strong id="eitmy"></strong>
      1. <li id="eitmy"></li>

        1. <li id="eitmy"></li>
          0712-2888027 189-8648-0214
          微信公眾號

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

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

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

          時間:2024-04-12來源:風信官網 點擊: 1688次
          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

          欄目列表
          推薦內容
          熱點內容
          展開
          一区二区三区福利视频免费看|久久天天躁狠狠躁夜夜2020一|亚洲日本欧美日韩高观看|免费A片无遮挡网站