1. <u id="epx8e"></u>
        <u id="epx8e"><sub id="epx8e"></sub></u>

        
        
        <video id="epx8e"><big id="epx8e"></big></video>

        <i id="epx8e"><bdo id="epx8e"><delect id="epx8e"></delect></bdo></i>
        0712-2888027 189-8648-0214
        微信公眾號

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

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

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

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

        欄目列表
        推薦內容
        熱點內容
        展開
        亚洲AV无码乱码国产精品桃色_国产欧美亚洲精品第二区软件_精品亚洲AV无码国产一区在线_老熟妇乱子伦中文观看_日韩 欧美 亚洲 精品 少妇_日本按摩高潮A级中文字幕免费观看