页面有一个图标,我想鼠标经过时候放出图片

提问 已结
15 494
陌独行
陌独行 2018-5-11
悬赏:20飞吻
版本:layui 浏览器:





想要做成鼠标经过时候显示图片, 求大神指点
回帖
  • var im = $(this).append('<img class="thumb-show" src="'+$(this).attr('thumb')+'" >');
    你这句直接写成var im ='<img class="thumb-show" src="‘+$(this).attr('thumb')+'" >';
    0 回复
  • 温柔9090
    2018-5-11
    onmouseover 事件不行吗?
    0 回复
  • 陌独行
    2018-5-11
    @温柔9090 $('#thumb').on("mouseover mouseout", function (event) {
    if(event.type == "mouseover"){alert(123);
    //鼠标悬浮
    }else if(event.type == "mouseout"){
    //鼠标离开
    }


    没反应啊。

    });
    0 回复
  • var layertip=null;
    $(document).on('mouseenter','.abc',function(){
    layertip=layer.tips('<img style="" src='"/ >', this, { tips: ‘位置’,area: ['宽度', '高度'],time:0});
    })
    0 回复
  • @自在唯我
    $(document).on('mouseleave','.abc',function(){
    layer.close(layertip);
    })
    位置还需要计算,不然超出屏幕
    0 回复
  • 陌独行
    2018-5-11
    这样会一直追加,
    var layertip = null;
    $(document).on('mouseenter','.thumb',function(){
    console.log(event);
    var im = $(this).append('<img class="thumb-show" src="'+$(this).attr('thumb')+'" >');
    var link = $(this).attr('href');
    //layertip=layer.tips('<img style="" src='"/ >', this, { tips:[2,'#009688'] ,area: ['宽度', '高度'],time:false});
    layertip = layer.tips( im, this, {
    tips: [2,'#009688'],
    area: ['400', '400'],
    time: false
    });

    });
    也会把其它的元素挤出页面了。
    0 回复
  • 陌独行
    2018-5-11
    @自在唯我 这样会一直追加,
    var layertip = null;
    $(document).on('mouseenter','.thumb',function(){
    console.log(event);
    var im = $(this).append('<img class="thumb-show" src="'+$(this).attr('thumb')+'" >');
    var link = $(this).attr('href');
    //layertip=layer.tips('<img style="" src='"/ >', this, { tips:[2,'#009688'] ,area: ['宽度', '高度'],time:false});
    layertip = layer.tips( im, this, {
    tips: [2,'#009688'],
    area: ['400', '400'],
    time: false
    });

    });
    也会把其它的元素挤出页面了。 求大神再次指点下。
    0 回复
  • 你用append是会挤进去的,所以我用的是layer.tips,
    var layertip=null;
    //显示缩略图
    $(document).on('mouseenter','.media_name]', function(e) {
    if(mbm.status==null){
    var xx = e.originalEvent.x || e.originalEvent.layerX || 0;
    var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
    var tip=2;//右边
    var height = $(window).height();
    if(yy+12+220>height){
    tip=1;//上边
    }
    var url=$(this).next().text();
    var div=this;
    layertip=layer.tips('<img style="width:300px;height:200px;margin-top:4px;" src="'+ipandport+'\\'+url+'"/>', div, {
    tips: [tip, '#0FA6D8'],//还可配置颜色
    area: ['320px', '220px'],
    time:0
    });

    }
    });
    //隐藏缩略图
    $(document).on('mouseleave','div[name="mediaListGrid_col_1"]', function() {
    layer.close(layertip);
    }
    });
    0 回复
  • 这代码就这效果,不过图片因为换了服务器没得了,
    0 回复
  • 0 回复
  • 陌独行
    2018-5-14
    @自在唯我 if(mbm.status==null){
    这个mbm是哪里定义的啊。
    0 回复
  • @陌独行 。。。这句话不用管,你只需要在意计算位置和显示图片,
    0 回复
  • 陌独行
    2018-5-14
    @自在唯我 那个 最后一个问题啊

    那个横杠有什么办法变细或者消失吗。
    0 回复
  • @陌独行 那横杠是什么,没看明白
    0 回复
  • 陌独行
    2018-5-14
    @自在唯我 好了,是一个样式引起的。
    0 回复