<h1>图片放大插件使用方法(依据fancybox简化而成)</h1>
<p>1.文件引入：zoom.js + zoom.css</p>
<p>2.本页面加入调用script代码</p>
<p>3.页面中需要点击放大的img，需要用a标签括起来，然后给a标签加属性及值 rel="zoom_group" </p>
<p>4.注意：a标签的href可以和img的src不同</p>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<base href="http://www.fibo-china.cn/"/>
<!--<script src="zoom.js"></script>-->
<!--<link rel="stylesheet" href="zoom.css"/>-->
<script src="/r/cms/www/red/js/jscn/zoom.js"></script>
<link rel="stylesheet" href="/r/cms/www/red/css/csscn3/zoom.css"/>
<title>图片点击放大插件__haley</title>
</head>
<body>
<div>
<h1>图片放大插件使用方法(依据fancybox简化而成)</h1>
<p>1.文件引入：zoom.js + zoom.css</p>
<p>2.本页面加入调用script代码</p>
<p>3.页面中需要点击放大的img，需要用a标签括起来，然后给a标签加属性及值 rel="zoom_group" </p>
<p>4.注意：a标签的href可以和img的src不同</p>
<div style="height: 50px;"></div>
</div>
<div>
<a href="http://www.jqcool.net/demo/201503/jquery-touchswipe/images/1.jpg" rel="zoom_group" >
<img src="http://www.jqcool.net/demo/201503/jquery-touchswipe/images/1.jpg" width="300"/>
</a>
<a href="http://www.jqcool.net/demo/201503/jquery-touchswipe/images/2.jpg" rel="zoom_group" >
<img src="http://www.jqcool.net/demo/201503/jquery-touchswipe/images/2.jpg" width="300"/>
</a>
<a href="http://www.jqcool.net/demo/201503/jquery-touchswipe/images/3.jpg" rel="zoom_group" >
<img src="http://www.jqcool.net/demo/201503/jquery-touchswipe/images/3.jpg" width="300"/>
</a>
<a href="http://www.jqcool.net/demo/201503/jquery-touchswipe/images/4.jpg" rel="zoom_group" >
<img src="http://www.jqcool.net/demo/201503/jquery-touchswipe/images/4.jpg" width="300"/>
</a>
</div>
<script>
$(function(){
var elems=$("a[rel=zoom_group]");
elems.attr("style","cursor: url('http://tb2.bdstatic.com/tb/static-pb/img/cur_zin.cur'), pointer");
elems.fancybox();
});
</script>
</body>
</html>
haley欢迎您来访本博客。此博客是作者在工作中的一个记事本，方便下次遇到同样问题时，以最快的速度解决掉遇到的问题。如果您发现哪里写的不对，欢迎给我留言，让我们一起进步。不胜感激！