73, move the mouse events, show and hide data

 $("th.detail").hover(function (event) {
                    var mx = event.offsetX;
                    var my = event.offsetY;
                    var x = mx + 5;
                    var y = my + 5;
  $(this).children("div").css({
                        position: "absolute",
                        "z-index": "99",
                        left: x,
                        top: y
                    });
   $(this).children("div").show();
                }, function () {
                    $(this).children("div").hide();
                });
            })




View larger image

/**'
* 浏览大图
* @param obj
*/
var previewImg = function (obj) {
    var src = $(obj).attr("src");
    var width = 600;
    var height = 600;
    var img = new Image();
 var imgHtml = "<img src='" + src + "' width='" + width + "'+ height='" + height + " '/>";
    //弹出层
    layer.open({
        type: 1,
        shade: 0.8,
 offset: 'auto',
        area: [width + 'px', height + 'px'],
        shadeClose: true,
        scrollbar: false,
        title: "图片预览", //不显示标题
        content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
        cancel: function () {
 //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });
    }
    });
}




//调用方法

<a  href='javascript:;' onclick='previewImg(this)' src='" + url + d.savename + "' >[文件名称]</a>




// View picture

/**'
 * 浏览大图
 * @param obj
 */
function previewImg(obj) {
    var src = $(obj).attr("src");
    if(src==null || src==""){
        layer.msg("没有发现图片!");
        return ;
    }

 var default_config = {title: "图片预览"};
    var img = new Image();
    img.onload = function() {//避免图片还未加载完成无法获取到图片的大小。
        //避免图片太大,导致弹出展示超出了网页显示访问,所以图片大于浏览器时下窗口可视区域时,进行等比例缩小。
        var max_height = $(window).height() - 100;
        var max_width = $(window).width();
        //rate1,rate2,rate3 三个比例中取最小的。
        var rate1 = max_height/img.height;
        var rate2 = max_width/img.width;
        var rate3 = 1;
        var rate = Math.min(rate1,rate2,rate3);
  //等比例缩放
        default_config.height = img.height * rate; //获取图片高度
        default_config.width = img.width  * rate; //获取图片宽度
        default_config.width-=50
        default_config.src = src;
   $.extend( default_config, obj);
        var imgHtml = "<img src='" + default_config.src + "' width='"+default_config.width +"px' height='"+default_config.height+"px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.
  area: [default_config.width + 'px',default_config.height +'px'], ////宽,高
            shadeClose:true,
            scrollbar: false,
            title: default_config.title, //不显示标题
            content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
    img.src = src;
}




Guess you like

Origin blog.csdn.net/weixin_34080903/article/details/90849452