Zoomify图片放大缩小功能

1、引入文件

<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 class="zoomify" src="images/img1.jpg" alt="">

3、JavaScript

$('.zoomify').zoomify();

配置

1、属性

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

2、方法

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

3、事件

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

基本方法
html

<divclass="wrap">

<imgclass="zoomify"src="images/img1.jpg"alt="">

</div>

script

$(function(){

$('.zoomify').zoomify();

});

事件委托
html

<divclass="wrap">

<imgclass="zoomify"src="images/img1.jpg"alt="">

</div>

script

$("body").on("click",".zoomify",function
() {

 $(this).zoomify("zoom");

})

自定义方法
html

<divclass="wrap">

<imgclass="zoomify"src="images/img1.jpg"alt="">

</div>

<divclass="btns">

<aclass="zoom"href="javascript:">放大/缩小</a>

<aclass="zoomIn"href="javascript:">放大</a>

<aclass="zoomOut"href="javascript:">缩小</a>

<aclass="reposition"href="javascript:">重新计算</a>

</div>
script

$(function(){

$('.zoomify').zoomify();

 

$('.zoom').on('click',function(){

$('.zoomify').zoomify('zoom');

});

$('.zoomIn').on('click',function(){

$('.zoomify').zoomify('zoomIn');

});

$('.zoomOut').on('click',function(){

$('.zoomify').zoomify('zoomOut');

});

$('.reposition').on('click',function(){

$('.zoomify').zoomify('reposition');

});

});

自定义事件
html

<divclass="wrap">

<imgclass="zoomify"src="images/img1.jpg"alt="">

</div>

script

$(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('缩小完成');

},

});

});