一款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