<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>