jQuery缩放插件Zoomify的使用

1、html页面引入css和js

<link rel="stylesheet" href="css/zoomify.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/zoomify.min.js"></script>

2、html元素

<img src="images/img1.jpg" class="img" />

3、js调用

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

配置：

4、zoomify的方法zoom放大或缩小，zoomIn放大，zoomOut缩小，reposition重新调整

<div class="box">
	<img class="img" src="images/img1.jpg" />
</div>
<button class="bigAndSmall">放大或缩小</button>
<button class="big">放大</button>
<button class="small">缩小</button>
<button class="readjust">重新调整</button>
<script>
$(function() {
	$('.img').zoomify();
	//放大或缩小
	$('.bigAndSmall').click(function(){
		$('.img').zoomify('zoom');
	});
	//放大
	$('.big').on('click',function(){
		$('.img').zoomify('zoomIn');
	});
	//缩小
	$('.small').click(function(){
		$('.img').zoomify('zoomOut');
	});
	//重新调整
	$('.readjust').click(function(){
		$('.img').zoomify('reposition');
	});
});
</script>

5、zoomify的事件zoom-in.zoomify开始放大,zoom-in-complete.zoomify放大完成，zoom-out.zoomify开始缩小zoom-out-complete.zoomify缩小完成

<div class="box">
	<img class="img" src="images/img1.jpg" />
</div>
<script>
$(function() {
	var zo=$('.img').zoomify();
	zo.zoomify().on({
		'zoom-in.zoomify': function() {
            alert('开始放大,放大前');
        },
		'zoom-in-complete.zoomify':function(){
			alert('放大完成，放大后');
		},
		'zoom-out.zoomify':function(){
			alert('开始缩小，缩小前');
		},
		'zoom-out-complete.zoomify':function(){
			alert('缩小完成，缩小后');
		},
	})
});
</script>