Top

jQuery图片预览插件收集

一、Colorbox强大的jQuery轻量级Lightbox插件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Color-Box</title>
 6     <link rel="stylesheet" type="text/css" href="styles/colorbox.css">
 7     <link rel="stylesheet" type="text/css" href="styles/ace.css">
 8     <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
 9     <script type="text/javascript" src="js/jquery.colorbox.js"></script>
10 </head>
11 <body>
12     <a class='gallery' href='images/scenic01.jpg'>Photo_1</a>
13     <a class='gallery' href='images/scenic02.jpg'>Photo_2</a>
14     <a class='gallery' href='images/scenic03.jpg'>Photo_3</a>
15     <script type="text/javascript">
16         $(function(){
17             $('a.gallery').colorbox({
18                 rel:true,  /*这个参数可以作为一个锚REL的替代方式。它允许用户将任何元素组合为一个组，制作图片画廊*/
19                 photo:true,
20                 reposition:true,
21                 scalePhotos:true,
22                 scrolling:false,
23                 opacity:'0.85',
24                 previous:'<i class="icon-arrow-left">prev</i>',
25                 next:'<i class="icon-arrow-right">next</i>',
26                 close:'×',
27                 current:'{current} of {total}',
28                 maxWidth:'100%',
29                 maxHeight:'100%',
30                 onOpen:function(){
31                     document.body.style.overflow = 'hidden';
32                 },
33                 onClosed:function(){
34                     document.body.style.overflow = 'auto';
35                 },
36                 onComplete:function(){
37                     $.colorbox.resize();
38                 }
39 
40                 /*escKey  true    如果为false，将禁止使用“ESC”键关闭Colorbox*/
41             });
42         });
43 
44     </script>
45 </body>
46 </html>

Colorbox强大的jQuery轻量级Lightbox插件

二、imgPreview插件来实现鼠标移动到图片或者文字链接的上来实现图片预览的功能

jQuery图片预览插件imgPreview

jQuery纯图片切换带缩略图

JQUERY图片弹出框插件-JQUERY LIGHTBOX

 

学习资料

http://keleyi.com/menu/jquery/

 

posted @ 2016-07-19 23:14  Avenstar  阅读(1699)  评论(0)    收藏  举报