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

1. <divclass="wrap">
2. <imgclass="zoomify"src="images/img1.jpg"alt="">
3. </div>

script

1. $(function(){
2. $('.zoomify').zoomify();
3. });

事件委托

html

1. <divclass="wrap">
2. <imgclass="zoomify"src="images/img1.jpg"alt="">
3. </div>

script

1. $("body").on("click",".zoomify",function () {
   
2.  $(this).zoomify("zoom");
3. })

自定义方法

html

1. <divclass="wrap">
2. <imgclass="zoomify"src="images/img1.jpg"alt="">
3. </div>
4. <divclass="btns">
5. <aclass="zoom"href="javascript:">放大/缩小</a>
6. <aclass="zoomIn"href="javascript:">放大</a>
7. <aclass="zoomOut"href="javascript:">缩小</a>
8. <aclass="reposition"href="javascript:">重新计算</a>
9. </div>

script

1. $(function(){
2. $('.zoomify').zoomify();
3.  
4. $('.zoom').on('click',function(){
5. $('.zoomify').zoomify('zoom');
6. });
7. $('.zoomIn').on('click',function(){
8. $('.zoomify').zoomify('zoomIn');
9. });
10. $('.zoomOut').on('click',function(){
11. $('.zoomify').zoomify('zoomOut');
12. });
13. $('.reposition').on('click',function(){
14. $('.zoomify').zoomify('reposition');
15. });
16. });

自定义事件

html

1. <divclass="wrap">
2. <imgclass="zoomify"src="images/img1.jpg"alt="">
3. </div>

script

1. $(function(){
2. var $zoomify= $('.zoomify');
3. $zoomify.zoomify().on({
4. 'zoom-in.zoomify':function(){
5. alert('开始放大');
6. },
7. 'zoom-in-complete.zoomify':function(){
8. alert('放大完成');
9. },
10. 'zoom-out.zoomify':function(){
11. alert('开始缩小');
12. },
13. 'zoom-out-complete.zoomify':function(){
14. alert('缩小完成');
15. },
16. });
17. });