Javascript 鼠标上方数据目标的弹出图像_Javascript_Jquery_Html_Css

Javascript 鼠标上方数据目标的弹出图像

javascript jquery html css

Javascript 鼠标上方数据目标的弹出图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个链接，旁边有一个图标： <a href="javascript:void(0)" data-target="/link/to/image.jpg"><span id="icon"></span></a> 你能给我看一个小的js/jQuery/代码，它在鼠标悬停时显示一个弹出窗口，数据目标的图像位于右下角吗大概是这样的：实际上，为了展示这一点，您根本不需要jQuery，因为您可以使用css来实现它，如下所示：李{

我有一个链接，旁边有一个图标：

<a href="javascript:void(0)" data-target="/link/to/image.jpg"><span id="icon"></span></a>

你能给我看一个小的js/jQuery/代码，它在鼠标悬停时显示一个弹出窗口，数据目标的图像位于右下角吗

大概是这样的：

实际上，为了展示这一点，您根本不需要jQuery，因为您可以使用css来实现它，如下所示：









李{
列表样式：无；
位置：相对位置；
}
李a>img{
显示：无；
位置：绝对位置；
顶部：10px；
左：150px；
}
li a:悬停>图像{
显示：块；
}

实际上，为了展示这一点，您根本不需要jQuery，因为您可以使用css来实现它，如下所示：









李{
列表样式：无；
位置：相对位置；
}
李a>img{
显示：无；
位置：绝对位置；
顶部：10px；
左：150px；
}
li a:悬停>图像{
显示：块；
}

此处链接是其悬停的类名

$(".link").mouseover(funtion(){
    var imagepath = $(this).attr("data-target")
    $( "this").tooltip({ content: "<img src='"+imagepath+"'/>" });  
})

$（“.link”）.mouseover（函数（）{
var imagepath=$（this.attr（“数据目标”）
$（“this”）。工具提示（{content:}）；
})

此处链接是其悬停的类名

$(".link").mouseover(funtion(){
    var imagepath = $(this).attr("data-target")
    $( "this").tooltip({ content: "<img src='"+imagepath+"'/>" });  
})

$（“.link”）.mouseover（函数（）{
var imagepath=$（this.attr（“数据目标”）
$（“this”）。工具提示（{content:}）；
})

试试这样的方法

我正在使用Bootstrap列表组元素和一些自定义的JQuery。您还可以轻松自定义

窗口

类以满足您的需要

$（'.list group a'）。悬停（函数（）{
var image=$（this.data（'target'）；
$（this.append（“”）
}，函数（）{
$（this.find（'.window'）.remove（）；
});
var mouseX；
var mouseY；
$（文档）.mousemove（函数（e）{
鼠标=（e.pageX+20）+‘px’；
鼠标=（e.pageY+20）+‘px’；
$（this.find（'.window'）.css（{'top'：mouseY，'left'：mouseX}）；
});

.window{
宽度：60px；
高度：60px；
填充：3倍；
边框：1px纯黑；
显示：表格；
文本对齐：居中；
垂直对齐：中间对齐；
位置：固定；
z指数：999；
}
.窗口img{
显示：表格单元格；
垂直对齐：中间对齐；
最大高度：100%；
宽度：自动；
}

试试这样的方法

我正在使用Bootstrap列表组元素和一些自定义的JQuery。您还可以轻松自定义

窗口

类以满足您的需要

$（'.list group a'）。悬停（函数（）{
var image=$（this.data（'target'）；
$（this.append（“”）
}，函数（）{
$（this.find（'.window'）.remove（）；
});
var mouseX；
var mouseY；
$（文档）.mousemove（函数（e）{
鼠标=（e.pageX+20）+‘px’；
鼠标=（e.pageY+20）+‘px’；
$（this.find（'.window'）.css（{'top'：mouseY，'left'：mouseX}）；
});

.window{
宽度：60px；
高度：60px；
填充：3倍；
边框：1px纯黑；
显示：表格；
文本对齐：居中；
垂直对齐：中间对齐；
位置：固定；
z指数：999；
}
.窗口img{
显示：表格单元格；
垂直对齐：中间对齐；
最大高度：100%；
宽度：自动；
}

我看到了一些很棒的例子，下面是我的例子

注意：使用css引导

HTML:

<div class="container">
   <div class="list-group">
      <a data-target="link" href="#" class="list-group-item active">Cras justo odio</a>
      <a data-target="link" href="#" class="list-group-item">Dapibus ac facilisis in</a>
      <a data-target="link" href="#" class="list-group-item">Morbi leo risus</a>
    </div>
</div>
<!-- should be build in js - placeholder -->
<div id="hover-container"></div>

(function($) {
    var placeholder = $("#hover-container");

    function mouseIn(event){
            var picture = '<img src="'+$(this).data("target")+'" alt="">';
        $(placeholder).html(picture);
    }

    function mouseOut(event) {
        $(placeholder).css({
            left: -1000,
            top: -1000
        });
        $(placeholder).html("");
    }

    $("*[data-target]").hover(mouseIn, mouseOut);

    $("*[data-target]").mousemove(function(){
                $(placeholder).css({
            left: event.pageX + 15,
            top: event.pageY + 15
        });       
    });

}) ($);

Javascript:

<div class="container">
   <div class="list-group">
      <a data-target="link" href="#" class="list-group-item active">Cras justo odio</a>
      <a data-target="link" href="#" class="list-group-item">Dapibus ac facilisis in</a>
      <a data-target="link" href="#" class="list-group-item">Morbi leo risus</a>
    </div>
</div>
<!-- should be build in js - placeholder -->
<div id="hover-container"></div>

(function($) {
    var placeholder = $("#hover-container");

    function mouseIn(event){
            var picture = '<img src="'+$(this).data("target")+'" alt="">';
        $(placeholder).html(picture);
    }

    function mouseOut(event) {
        $(placeholder).css({
            left: -1000,
            top: -1000
        });
        $(placeholder).html("");
    }

    $("*[data-target]").hover(mouseIn, mouseOut);

    $("*[data-target]").mousemove(function(){
                $(placeholder).css({
            left: event.pageX + 15,
            top: event.pageY + 15
        });       
    });

}) ($);

（函数（$）{
变量占位符=$（“#悬停容器”）；
函数mouseIn（事件）{
var图片=“”；
$（占位符）.html（图片）；
}
功能鼠标输出（事件）{
$（占位符）.css({
左：-1000，
顶部：-1000
});
$（占位符）.html（“”）；
}
$（“*[数据目标]”）。悬停（鼠标输入，鼠标输出）；
$（“*[数据目标]”）.mousemove（函数（）{
$（占位符）.css({
左：event.pageX+15，
顶部：event.pageY+15
});       
});
}) ($);

我不建议你自己建造这个。作为学习jQuery或磨砺技能的工具，这是一个很好的练习，但最终它会重新发明轮子

这里有一个我个人使用过的很棒的图书馆。