jquery.zoom.js

jquery.zoom.js 介绍

jquery.zoom.js是一款非常实用的图片内部缩放和平移jQuery插件。该插件可以鼠标滑过图片，点击图片或移动手机上触摸图片时，将图片进行放大或平移操作。  

jquery.zoom.js 使用 

1、安装或引入

npm install jquery-zoom

或

<script src="js/jquery-1.11.0.min.js"></script>

<script src="js/jquery-zoom.js"></script>

2、html

<span class='zoom' id='ex1'>

<img src='img/design.jpg' width='555' height='320' alt='web design'/>

<p>Hover</p>

</span>

3、初始化

$(document).ready(function(){

$('a.photo').zoom({url: 'photo-big.jpg'});

});

// 或者通过 Colorbox 来放大图片

$(document).ready(function(){

$('a.photo').zoom({

url: 'photo-big.jpg',

callback: function(){

$(this).colorbox({href: this.src});

}

});

});

要使图片可以被放大，必须将图片包裹在一个容器中，你可以通过js代码来为图片动态添加容器，例如： 

$(document).ready(function(){

$('img')

.wrap('<span display:inline-block"></span>')

.css('display','block')

.parent()

.zoom();

});

 

网站地址:http://www.jacklmoore.com/zoom/

GitHub:https://github.com/jackmoore/zoom

网站描述:一款非常实用的图片内部缩放和平移jQuery插件

jquery.zoom.js

官方网站：http://www.jacklmoore.com/zoom/

小编说

以上是编程之家为你收集整理的jquery.zoom.js全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。