美文网首页
layui鼠标滑过悬浮展示图片

layui鼠标滑过悬浮展示图片

作者: 木木呦 | 来源:发表于2020-07-17 12:52 被阅读0次
效果图
<img onmouseover='hoverOpenImg(this)' style='color: #1200ff;width: 30px; height: 30px;' src='https://img.haomeiwen.com/i14523486/6ab447443ee874ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'/>
// 悬浮展示图片
    function hoverOpenImg(_this){
        var img_show = null; // tips提示
        $(_this).hover(function(){
            var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:130px;'/>";
            img_show = layer.tips(img, this,{
                tips:[2, 'rgba(41,41,41,.5)']
                ,area: ['160px']
            });
        },function(){
            layer.close(img_show);
        });
        $(_this).attr('style','max-width:70px');
    }

相关文章

网友评论

      本文标题:layui鼠标滑过悬浮展示图片

      本文链接:https://www.haomeiwen.com/subject/yakghktx.html