图片放大器

public/resource/css/public.css

@@ -45,10 +45,10 @@ a:hover{
 /*-------------------------------*/
 /*           VARIABLES           */
 /*-------------------------------*/
-body {
+/*body {
     position: relative;
     overflow-x: hidden;
-}
+}*/
 .nav .open > a {
     background-color: transparent;
 }

public/resource/js/banner.js

 /**
  * Created by zw on 2017/12/15.
  */
-define (['doT', 'text!temp/banner_template_tpl.html', 'ckfinder', 'ckfinderStart', 'css!style/home.css'], function (doT, template) {
+define (['doT', 'text!temp/banner_template_tpl.html', 'ckfinder', 'ckfinderStart', 'css!style/home.css','blow-up'], function (doT, template) {
     var banner = {
         pageNo: 1, /*第几页*/
         pageSize: 15, /*每页显示多少条*/
@@ -110,7 +110,7 @@ define (['doT', 'text!temp/banner_template_tpl.html', 'ckfinder', 'ckfinderStart
                             banner.getBannerList (el.num.current);
                         }
                     });
-
+                    $('.J_preview').preview();
                 }
 
             });

public/resource/js/main.js

@@ -15,6 +15,7 @@ require.config ({
         'datetimepicker': 'lib/js/bootstrap-datetimepicker.min',
         'pagination': 'lib/js/Pagination',
         'paginationStart': 'lib/js/zw.pagination',
+        'blow-up': 'lib/js/blow-up',
     },
     'shim': {
         'jquery': {
@@ -42,6 +43,10 @@ require.config ({
         },
         'paginationStart':{
             'exports': 'pagination'
+        },
+        'blow-up' : {
+            'deps': ['jquery'],
+            'exports': 'blow-up'
         }
     },
     'map': {

public/resource/lib/js/blow-up.js

+/**
+ * Created by zw on 2018/01/02.
+ * intro 显示大图JS
+ */
+;(function($){
+    $.fn.preview = function(){
+        var w = $(window).width();
+        var h = $(window).height();
+        $(this).each(function(){
+            $(this).hover(function(e){
+                if(/.png|.gif|.jpg|.bmp|.jpeg/.test($(this).attr("data-bimg"))){
+                    $("body").append("<div id='preview'><img src='"+$(this).attr('data-bimg')+"' /></div>");
+                }
+                var show_x = $(this).offset().left + $(this).width() ;
+                console.log(show_x);
+                var show_y = $(this).offset().top ;
+                var scroll_y = $(window).scrollTop();
+                console.log(scroll_y);
+                $("#preview").css({
+                    position:"absolute",
+                    padding:"4px",
+                    border:"1px solid #f3f3f3",
+                    backgroundColor:"#eeeeee",
+                    top:show_y + "px",
+                    left:show_x + "px",
+                    zIndex:1000
+                });
+                $("#preview > div").css({
+                    padding:"5px",
+                    backgroundColor:"white",
+                    border:"1px solid #cccccc"
+                });
+                if (show_y + 230 > h + scroll_y) {
+                    $("#preview").css("bottom", h - show_y - $(this).height() + "px").css("top", "auto");
+                } else {
+                    $("#preview").css("top", show_y + "px").css("bottom", "auto");
+                }
+                $("#preview").fadeIn("fast")
+            },function(){
+                $("#preview").remove();
+            })
+        });
+    };
+})(jQuery);
\ No newline at end of file

public/resource/template/banner_template_tpl.html

@@ -5,7 +5,8 @@
         <td>[%= it[item]["title"] %]</td>
         <td>
             <input type="hidden" value='[%= it[item]["pic_path"] %]'>
-            <img src='/resource/lib/Attachments/[%= it[item]["pic_path"] %]'  class="diagram-image" >
+            <img src='/resource/lib/Attachments/[%= it[item]["pic_path"] %]'  class="diagram-image J_preview"
+                 data-bimg='/resource/lib/Attachments/[%= it[item]["pic_path"] %]' >
         </td>
         <td>[%= it[item]["url"] %]</td>
         <td>[%= it[item]["sort"] %]</td>