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插件来实现鼠标移动到图片或者文字链接的上来实现图片预览的功能
学习资料
http://keleyi.com/menu/jquery/

 
                
            
         
         浙公网安备 33010602011771号
浙公网安备 33010602011771号