鼠标经过,图片放大事件

Posted 2020-12-12 haima

图片经过事件

layui

js代码

// layer.load(2);
table.render({
    elem: ‘#tableFilter‘,
    url:"{:url(‘Ads/index‘)}",
    //toolbar: ‘#toolbarDemo‘,
    even: true, //开启隔行背景
    id:‘table_id‘,
    page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
        layout: [‘limit‘, ‘count‘, ‘prev‘, ‘page‘, ‘next‘, ‘skip‘,‘last‘] //自定义分页布局
        //,curr: 5 //设定初始在第 5 页
        ,groups: 5 //只显示 1 个连续页码
        ,first: false //不显示首页
        ,last: false //不显示尾页
        ,limit:15
        ,limits:[20,30,40,60,80,100]
    },
    //  height: ‘full-100‘,
    text: {
        none: ‘暂无相关数据‘
    },
    cols: [[
        {type: ‘checkbox‘},
        {field: ‘id‘,  title: ‘ID‘,width:70,align:‘center‘,sort:true},
        {field: ‘avatar‘,style:‘cursor: pointer;‘, width: 70, align: ‘center‘,title: ‘图片‘,templet:function (d) {
                return ‘<img  src="‘+d.ads_img_url+‘"  alt="头像" class="layui-nav-img" />‘;
            }},
       
      
        // {fixed: ‘right‘,templet: ‘#operationTpl‘, width: 200, align: ‘center‘, title: ‘操作‘}
        {fixed: ‘right‘ ,title: ‘操作‘,width: 200, align: ‘center‘,templet:function(d){
                var html = "";
                if (d.status==1){
                    html += ‘<a href="javascript:;"   class="layui-btn  layui-btn-xs" style="background-color: #1E9FFF" onmouseover="tis(this)"  data-title="同意" lay-event="agree"><i class="layui-icon">&#xe605;</i></a>‘ +
                        ‘<a href="javascript:;"   class="layui-btn  layui-btn-xs refuse" style="background-color: #FF5722" onmouseover="tis(this)"  data-title="拒绝" lay-event="refuse"><i class="layui-icon">&#x1006;</i></a>‘;
                }
                else if(d.status==2){
                    html += ‘<a href="javascript:;"   class="layui-btn  layui-btn-xs refuse" style="background-color: #FF5722" onmouseover="tis(this)"  data-title="停用" lay-event="refuse"><i class="layui-icon">&#x1006;</i></a>‘
                }
                // else{
                   html += ‘<a href="javascript:;"   class="layui-btn  layui-btn-xs" style="background-color: #c2c2c2" onmouseover="tis(this)"  data-title="日志" lay-event="catLog"><i class="layui-icon ">&#xe60e;</i></a>‘;
                // }

            return html;

            } }
    ]],

    done: function (res) {
        layer.closeAll(‘loading‘);
        hoverOpenImg();  //调用方法
    }
});

//js代码图片经过事件
function hoverOpenImg(){
    var img_show = null; // tips提示
    $(‘td img‘).hover(function(){
        var img = "<img class=‘img_msg‘ src=‘"+$(this).attr(‘src‘)+"‘ style=‘width:100%;max-height: 600px;‘ />";
        img_show = layer.tips(img, this,{
            tips:[2, ‘rgba(41,41,41,.0)‘]
            ,area: [‘12%‘]
        });
    },function(){
        layer.close(img_show);
    });
}