2014.01.13 笔记 (imgPreview - 实现图片预览功能)

imgPreview - 实现图片预览功能

 

首先页面：

　　页面中除了引用下面的JS代码，还不能忘记引用：jquery.min.js。。　　 

       然后添加一个图片链接
　　　　<a href="图片.jpg">图片预览</a>
　　最简单的不带任何参数的调用
　　　　$('a').imgPreview();

 1 <!DOCTYPE html>
 2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 3    
 4     <title>imgPreview - 实现图片预览功能的jQuery插件  演示页面 &gt;&gt; 给力技术</title>
 5 
 6     <style type="text/css">
 7         /* 仅用于此演示 */
 8             #imgPreviewWithStyles {
 9                 background: #222;
10                 -moz-border-radius: 10px;
11                 -webkit-border-radius: 10px;
12                 padding: 15px;
13                 z-index: 999;
14                 border: none;
15             }
16             #imgPreviewWithStyles span {
17                 color: white;
18                 font-size: 1em;
19                 text-align: center;
20                 display: block;
21                 padding: 10px 0 3px 0;
22             }
23             
24     </style>
25 </head>
26 <body style=" text-align:center; padding-top:130px;">
27     <div id="header">
28             <strong>imgPreview - 实现图片预览功能的jQuery插件</strong>
29     </div>
30     <div class="content">
31         <br><br><br>
32         
33         <a id="demo" href="ImageView_files/1.jpg">将鼠标移上此处~~</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
34         <a id="demo2" href="#" rel="ImageView_files/2.jpg">演示二(带链接)</a>
35         <br><br><br>
36        
37     <script type="text/javascript" src="./ImageView_files/jquery.min.js"></script>
38     <script type="text/javascript" src="./ImageView_files/imgpreview.min.0.22.jquery.js"></script>
39     <script type="text/javascript">
40         (function ($) {
41             $('#demo').imgPreview({
42                 containerID: 'imgPreviewWithStyles',
43                 imgCSS: {
44                     height: 200
45                 },
46                 onShow: function (link) {
47                     $(link).stop().animate({ opacity: 0.4 });
48                     $('img', this).stop().css({ opacity: 0 });
49                     $('<span>' + $(link).text() + '</span>').appendTo(this);
50                 },
51                 onLoad: function () {
52                     $(this).animate({ opacity: 1 }, 300);
53                 },
54                 onHide: function (link) {
55                     $(link).stop().animate({ opacity: 1 });
56                 }
57             });
58 
59             $('#demo2').imgPreview({
60                 srcAttr: 'rel',
61                 imgCSS: {
62                     height: 200,
63                     width: 350
64                 }
65             });
66         })(jQuery);
67     </script>
68     
69     <div id="imgPreviewWithStyles" style="display: none; position: absolute; "><img style=" "></div>
70     <div id="imgPreviewContainer" style="display: none; position: absolute; "><img style=" "></div>
71     </div>
72 </body></html>
ImageView.html

 

 

然后核心JS代码：

 1 (function(c) {
 2     c.expr[':'].linkingToImage = function(a, g, e) {
 3         return !! (c(a).attr(e[3]) && c(a).attr(e[3]).match(/\.(gif|jpe?g|png|bmp)$/i))
 4     };
 5     c.fn.imgPreview = function(j) {
 6         var b = c.extend({
 7             imgCSS: {},
 8             distanceFromCursor: {
 9                 top: 10,
10                 left: 10
11             },
12             preloadImages: true,
13             onShow: function() {},
14             onHide: function() {},
15             onLoad: function() {},
16             containerID: 'imgPreviewContainer',
17             containerLoadingClass: 'loading',
18             thumbPrefix: '',
19             srcAttr: 'href'
20         },
21         j),
22         d = c('<div/>').attr('id', b.containerID).append('<img/>').hide().css('position', 'absolute').appendTo('body'),
23         f = c('img', d).css(b.imgCSS),
24         h = this.filter(':linkingToImage(' + b.srcAttr + ')');
25         function i(a) {
26             return a.replace(/(\/?)([^\/]+)$/, '$1' + b.thumbPrefix + '$2')
27         }
28         if (b.preloadImages) { (function(a) {
29                 var g = new Image(),
30                 e = arguments.callee;
31                 g.src = i(c(h[a]).attr(b.srcAttr));
32                 g.onload = function() {
33                     h[a + 1] && e(a + 1)
34                 }
35             })(0)
36         }
37         h.mousemove(function(a) {
38             d.css({
39                 top: a.pageY + b.distanceFromCursor.top + 'px',
40                 left: a.pageX + b.distanceFromCursor.left + 'px'
41             })
42         }).hover(function() {
43             var a = this;
44             d.addClass(b.containerLoadingClass).show();
45             f.load(function() {
46                 d.removeClass(b.containerLoadingClass);
47                 f.show();
48                 b.onLoad.call(f[0], a)
49             }).attr('src', i(c(a).attr(b.srcAttr)));
50             b.onShow.call(d[0], a)
51         },
52         function() {
53             d.hide();
54             f.unbind('load').attr('src', '').hide();
55             b.onHide.call(d[0], this)
56         });
57         return this
58     }
59 })(jQuery);
imgpreview.min.0.22.jquery.js

 这块JS代码虽然简捷，但我完全没有看懂。。。明天抽时间再看一下。

posted @ 2014-01-14 00:31  aspnet_如月  阅读(996)  评论(0)  编辑  收藏  举报