一款Zoomify – jQuery缩放图片js

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

  下载好之后放到项目中：

一、静态图片使用

   引入zoomify文件 和 jQuery文件

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

        

            

                

                    
                    

                        缩略图标签
                        
一些示例文本。
                        

                             按钮1
                             按钮2
                        
                    
                
            
        

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

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

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

2、属性： 添加动画效果

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

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

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

       

            

                

                    
                    

                        缩略图标签
                        
一些示例文本。
                        

                             按钮1
                             按钮2
                        
                    
                
            
            

                放大/缩小
                放大
                缩小
            
        

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