小虎博客

A-A+

几行代码jquery实现图片放大预览

2016年01月07日 编程技术 暂无评论

一款效果很好的响应式图片放大浏览特效,引用文件：jquery.fancybox.css、jquery-1.8.2.min.js、jquery.fancybox.js (没有大家可以直接百度搜索下载),几行代码jquery实现图片放大预览,具体方法我已经整理成文件，可以预览查看效果，也可以直接下载浏览源码,代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.  <title>图片放大浏览</title>  
  5.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  6.       
  7.  <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.2" media="screen" />  
  8.    
  9.  <style type="text/css">  
  10.   .fancybox-custom .fancybox-skin {  
  11.    box-shadow: 0 0 50px #222;  
  12.   }  
  13.  </style>  
  14. </head>  
  15. <body>  
  16.  <p>  
  17.   <a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>  
  18.   <a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>  
  19.   <a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>  
  20.   <a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>  
  21.  </p>  
  22.    
  23. </body>  
  24.  <script type="text/javascript" src="../lib/jquery-1.8.2.min.js"></script>  
  25.  <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.3"></script>  
  26.  <script type="text/javascript">  
  27.   $(document).ready(function() {  
  28.    $('.fancybox-buttons').fancybox({  
  29.     openEffect  : 'none',  
  30.     closeEffect : 'none',  
  31.     prevEffect : 'none',  
  32.     nextEffect : 'none',  
  33.     closeBtn  : false,  
  34.     helpers : {  
  35.      title : {  
  36.       type : 'inside'  
  37.      }  
  38.     },  
  39.     afterLoad : function() {  
  40.      this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');  
  41.     }  
  42.    });  
  43.      
  44.   });  
  45.  </script>  
  46. </html>  
标签：

给我留言