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'});
});
// 或者通过 Color Box 来放大 图片
$(document).ready(function(){
$('a.photo').zoom({
url: 'photo-big.jpg',
callback: function(){
$(this).color Box ({href: this.src});
}
});
});
要使 图片 可以被放大,必须将 图片 包裹在 一个 容器中,你可以通过js 代码 来为 图片 动态 添加 容器,例如:?
$(document).ready(function(){
$('img')
.wrap('<span dis play:inline-block"></span>')
.css(' dis play','block')
.parent()
.zoom();
});
?
网站地址 : http://www.jacklmoore.com/zoom/
GitHub: https://github.com/jackmoore/zoom
网站描述: 一款非常实用的 图片 内部缩放和平移jQuery 插件
jquery.zoom.js官方网站
官方网站: http://www.jacklmoore.com/zoom/
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。