一款Zoomify – jQuery缩放图片js

jQuery缩放图片js效果-lightbox插件

  下载好之后放到项目中：

一、静态图片使用

   引入zoomify文件 和 jQuery文件

<!-- 进入Bootstrap的css样式 -->
    <link href="./bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
    <link href="./plugins/zoomify/css/zoomify.css" rel="stylesheet">

<!-- 引入jQuery  -->
    <script src="./jquery/jquery-1.12.4.js"></script>
<!-- 引入Bootstrap 的所有JavaScript 插件。 -->
    <script src="./bootstrap-3.3.7/js/bootstrap.js"></script>
    <script src="./plugins/zoomify/js/zoomify.js"></script>

 1、 简单使用： 给 <img> 添加 .zoomify 类，

        <div class="row">
            <div class="col-sm-4 col-md-4">
                <div class="thumbnail">
                    <img class="zoomify" src="./image/abc123.jpg"  alt="缩略图">
                    <div class="caption">
                        <h3>缩略图标签</h3>
                        <p>一些示例文本。</p>
                        <p>
                            <a href="#" class="btn btn-primary" role="button"> 按钮1</a>
                            <a href="#" class="btn btn-primary" role="button"> 按钮2</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

    JavaScript： 定义id 等其他选择器都可以

$(function () {
    $('.zoomify').zoomify();
});

     点击图片之后或有 遮蔽层。

2、属性： 添加动画效果

名称	类型	默认值	说明
duration	整数	200	动画持续时间
easing	字符串	linear	动画持续时间
scale	整数/浮点数	0.9	图片最大缩放比例

<img class="zoomify" data-duration="1000" data-easing="linear" data-scale="0.8" src="./image/abc123.jpg"  alt="缩略图">

3、方法：通过按钮实现放大缩小

名称	说明	举例
zoom	放大或缩小	$(‘.zoomify’).zoomify(‘zoom’);
zoomIn	放大	$(‘.zoomify’).zoomify(‘zoomIn’);
zoomOut	缩小	$(‘#myImage’).zoomify(‘zoomOut’);
reposition	重新调整	$(‘#myImage’).zoomify(‘reposition’);

       <div class="row">
            <div class="col-sm-4 col-md-4">
                <div class="thumbnail">
                    <img id="zoomifyImg" class="zoomify" data-duration="1000" data-easing="linear" data-scale="0.8" src="./image/abc123.jpg"  alt="缩略图">
                    <div class="caption">
                        <h3>缩略图标签</h3>
                        <p>一些示例文本。</p>
                        <p>
                            <a href="#" class="btn btn-primary" role="button"> 按钮1</a>
                            <a href="#" class="btn btn-primary" role="button"> 按钮2</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-4" style="position: absolute; right: 0; z-index: 2000;">
                <button type="button" class="btn btn-primary" id="zoom">放大/缩小</button>
                <button type="button" class="btn btn-primary" id="zoomin">放大</button>
                <button type="button" class="btn btn-success" id="zoomout">缩小</button>
            </div>
        </div>

JavaScript： 定义id 等其他选择器都可以

$(function () {
    $('.zoomify').zoomify();
    $("#zoom").on("click",function () {
        $(".zoomify").zoomify("zoom")
    } )
    $("#zoomin").on("click",function () {
        $(".zoomify").zoomify("zoomIn")
    } )
    $("#zoomout").on("click",function () {
        $(".zoomify").zoomify("zoomOut")
    } )
});

    

4、事件：不常用

名称	说明
zoom-in.zoomify	放大前的事件
zoom-in-complete.zoomify	放大后的事件
zoom-out.zoomify	缩小前的事件
zoom-out-complete.zoomify	缩小后的事件

JavaScript

$(function () {
    var $zoomify = $('.zoomify');
    $zoomify.zoomify().on({
        'zoom-in.zoomify': function() {
            alert('开始放大');
        },
        'zoom-in-complete.zoomify': function() {
            alert('放大完成');
        },
        'zoom-out.zoomify': function() {
            alert('开始缩小');
        },
        'zoom-out-complete.zoomify': function() {
            alert('缩小完成');
        },
    });
});

 二、动态添加的图片

 

 

 

下载及详情参考：http://www.sj520.cn/downloadDetail/16/1774.html