Browse Source

基础效果完成

tbphp 2 years ago
parent
commit
1688b2c0df
4 changed files with 181 additions and 26 deletions
  1. 15 3
      base.css
  2. 18 0
      images/back.svg
  3. 26 14
      index.html
  4. 122 9
      src/jquery.tImgBox.js

File diff suppressed because it is too large
+ 15 - 3
base.css


+ 18 - 0
images/back.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="135 0 90 90" enable-background="new 135 0 90 90" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M188.3,0c2,0,3.6,1.6,3.6,3.6v29.5h29.5c2,0,3.6,1.6,3.6,3.6s-1.6,3.6-3.6,3.6h-36.7V3.6
+		C184.7,1.6,186.3,0,188.3,0z"/>
+	<path fill="#FFFFFF" d="M221.4,0c0.9,0,1.8,0.3,2.6,1.1c1.4,1.4,1.4,3.7,0,5.1l-33.1,33.1c-1.4,1.4-3.7,1.4-5.1,0
+		c-1.4-1.4-1.4-3.7,0-5.1l33.1-33.1C219.6,0.3,220.5,0,221.4,0z"/>
+</g>
+<g>
+	<path fill="#FFFFFF" d="M138.6,49.7l36.7,0v36.7c0,2-1.6,3.6-3.6,3.6s-3.6-1.6-3.6-3.6V56.9l-29.5,0c-2,0-3.6-1.6-3.6-3.6
+		C134.9,51.2,136.6,49.7,138.6,49.7z"/>
+	<path fill="#FFFFFF" d="M171.7,49.7c0.9,0,1.8,0.3,2.6,1.1c1.4,1.4,1.4,3.7,0,5.1l-33.1,33.1c-1.4,1.4-3.7,1.4-5.1,0
+		s-1.4-3.7,0-5.1l33.1-33.1C169.8,50,170.8,49.7,171.7,49.7z"/>
+</g>
+</svg>

+ 26 - 14
index.html

@@ -6,26 +6,38 @@
     <link rel="stylesheet" href="base.css">
 </head>
 <body>
-    <!-- <img src="https://drscdn.500px.org/photo/187478843/q%3D80_m%3D2000/8564800e4546b7632c0fb23681dfb6b3">
-    <img src="http://pic.pp3.cn/uploads//201510/2015101803.jpg">
-    <img src="http://pic.pp3.cn/uploads//201510/2015101806.jpg"> -->
+    <img class="a" src="https://drscdn.500px.org/photo/187478843/q%3D80_m%3D2000/8564800e4546b7632c0fb23681dfb6b3">
+    <img class="a" src="https://drscdn.500px.org/photo/184497201/q%3D80_m%3D2000/2ece5a783dc97a3bb1d4f18c1000f95c">
+    <img class="a" src="http://pic.pp3.cn/uploads//201510/2015101803.jpg">
+    <img class="a" src="http://pic.pp3.cn/uploads//201510/2015101806.jpg">
+    <div id="other"></div>
     <div id="tImgBox">
         <div class="load"></div>
-        <img src="https://drscdn.500px.org/photo/184497201/q%3D80_m%3D2000/2ece5a783dc97a3bb1d4f18c1000f95c">
+        <div class="back"></div>
+        <div class="bar">
+            <span class="key">
+                <em>L</em>喜欢
+            </span>
+            <span class="key">
+                <em>F</em>收藏
+            </span>
+            <span class="key prev">
+                <em></em>前一张
+            </span>
+            <span class="key next">
+                <em></em>下一张
+            </span>
+            <span class="key esc">
+                <em>esc</em>关闭
+            </span>
+        </div>
+        <img src="">
     </div>
-    <div id="other"></div>
     <script type="text/javascript" src="jquery.1.12.4.min.js"></script>
     <script type="text/javascript" src="src/jquery.tImgBox.js"></script>
     <script type="text/javascript">
-        $('#tImgBox img').imgLoad({
-            before: function() {
-                $('#tImgBox .load').show();
-            },
-            complete: function() {
-                $('#tImgBox .load').hide();
-                $(this).fadeIn();
-            }
-        });
+        $('img.a').tImgBox();
+        $('img.b').tImgBox({attr: 'pic'});
     </script>
 </body>
 </html>

+ 122 - 9
src/jquery.tImgBox.js

@@ -1,5 +1,7 @@
 (function($) {
+    var isInitImgBox = true;
     var changeArr = [];
+
     function _change(isFull) {
         for (var i in changeArr) {
             if (isFull) {
@@ -22,15 +24,22 @@
          * @param   fun2 非全屏时触发
          */
         fullScreenChange: function(fun1, fun2) {
-            changeArr.push({on: fun1, off: fun2});
+            changeArr.push({
+                on: fun1,
+                off: fun2
+            });
         },
         // 判断是否为全屏
         isFullScreen: function() {
             return !(!document.fullscreen && !document.mozFullScreen && !document.webkitIsFullScreen && !document.msFullscreenElement);
         },
         // 全屏方法
-        fullScreen: function() {
-            var doc = document.documentElement;
+        fullScreen: function(t) {
+            if (t) {
+                var doc = t.get(0);
+            } else {
+                var doc = document.documentElement;
+            }
             if (doc.requestFullscreen) {
                 doc.requestFullscreen();
             } else if (doc.mozRequestFullScreen) {
@@ -54,19 +63,25 @@
                 document.msExitFullscreen();
             }
             _change(false);
-        }        
+        }
     });
     $.fn.extend({
         // 全屏/退出全屏切换
         toggleFullScreen: function(fun1, fun2) {
             var t = this;
-            fun2.call(t);
+            if (fun2) {
+                fun2.call(t);
+            }
             $.fullScreenChange(
                 function() {
-                    fun1.call(t);
+                    if (fun1) {
+                        fun1.call(t);
+                    }
                 },
                 function() {
-                    fun2.call(t);
+                    if (fun2) {
+                        fun2.call(t);
+                    }
                 }
             );
             return t.click(function() {
@@ -85,18 +100,116 @@
             };
             var opt = {};
             $.extend(opt, defaults, options);
-            
+
             return this.each(function() {
                 var t = this;
                 opt.before.call(t);
                 if (t.complete) {
                     opt.complete.call(t);
                 } else {
-                    $(t).load(function() {
+                    $(t).one('load', function() {
                         opt.complete.call(t);
                     });
                 }
             });
+        },
+        _changeImg: function(index) {
+            var img  = this.children('img');
+            var load = this.children('.load');
+            var imgs = this.data('imgs');
+            if (typeof index == 'number') {
+                var i = index;
+            } else if (typeof index == 'string') {
+                var old_i = Number(this.data('imgi'));
+                if (index == 'next') {
+                    var i = old_i + 1;
+                } else if (index == 'prev') {
+                    var i = old_i - 1;
+                }
+            }
+
+            if (i > imgs.length - 1 || i < 0 || img.attr('src') == imgs[i]) {
+                return false;
+            }
+
+            this.data('imgi', i);
+            load.hide(0).delay(200).show(0);
+            img.hide().attr('src', imgs[i]).imgLoad({
+                complete: function() {
+                    load.hide();
+                    img.fadeIn(200);
+                }
+            });
+        },
+        /**
+         * 图片全屏浏览插件
+         * @date   2016-12-18
+         */
+        tImgBox: function(options) {
+            // 配置参数
+            var defaults = {
+                attr: 'src'
+            };
+            var opt = {};
+            $.extend(opt, defaults, options);
+
+            // 初始化界面-只第一次执行
+            if (isInitImgBox) {
+                var box = $('#tImgBox');
+                isInitImgBox = false;
+                // 全屏、退出全屏事件
+                $.fullScreenChange(
+                    function() {
+                        $('body').addClass('timgbox-hidden');
+                        box.fadeIn(200);
+                    },
+                    function() {
+                        box.fadeOut(200, function() {
+                            $('body').removeClass('timgbox-hidden');
+                        });
+                    }
+                );
+                // 退出
+                box.find('.back,.esc').click(function() {
+                    $.exitFullScreen();
+                });
+                // 下一张
+                box.find('.next').click(function() {
+                    box._changeImg('next');
+                });
+                // 前一张
+                box.find('.prev').click(function() {
+                    box._changeImg('prev');
+                });
+                // 按键
+                $(document).keyup(function(e) {
+                    var code = e.keyCode;
+                    // 下一张
+                    if (code == 39) {
+                        box._changeImg('next');
+                    // 前一张
+                    } else if (code == 37) {
+                        box._changeImg('prev');
+                    // 喜欢
+                    } else if (code == 76) {
+                    // 收藏
+                    } else if (code == 70) {
+
+                    }
+                });
+            } else {
+                var box = $('#tImgBox');
+            }
+
+            var imgarr = [];
+            this.addClass('timgbox-zoom-in').each(function(i) {
+                var t = $(this);
+                imgarr.push(t.attr(opt.attr));
+                t.unbind('click').click(function() {
+                    $.fullScreen();
+                    box.data('imgs', imgarr)._changeImg(i);
+                });
+            });
         }
     });
 })(jQuery);