<tr id="frcqn"></tr>
<strong id="frcqn"><optgroup id="frcqn"></optgroup></strong>
<tr id="frcqn"></tr>
<tr id="frcqn"></tr>
<tr id="frcqn"></tr>
  • 0712-2888027 189-8648-0214
    微信公眾號

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

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

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

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

    欄目列表
    推薦內容
    熱點內容
    展開
    强奸乱伦之影音先锋,播放器男女免费,精品一区二区自拍偷拍,xxxxx日韩
    <tr id="frcqn"></tr>
    <strong id="frcqn"><optgroup id="frcqn"></optgroup></strong>
    <tr id="frcqn"></tr>
    <tr id="frcqn"></tr>
    <tr id="frcqn"></tr>