创建基于悬停的弹出信息窗口

最新推荐文章于 2020-12-04 09:56:25 发布

xiantouxu

最新推荐文章于 2020-12-04 09:56:25 发布

阅读量286

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/xiantouxu/article/details/77417040

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

问题描述：当鼠标滑过图片时，显示缩略图的信息

<!DOCTYPE html>
<html>
<head>
    <title>弹出框</title>
    <style>
    img{
        width: 200px;
        height: 150px;
    }
    .popup{
        position: absolute;
        border:1px solid #ccc;
    }
    </style>
</head>
<body>
<div>
    <img id="1" src="1.jpg" alt="图片1">
    <img id="2" src="2.jpg" alt="图片2">
    <img id="3" src="3.jpg" alt="图片3">
    <img id="4" src="4.jpg" alt="图片4">
</div>
<script type="text/javascript">
window.onload = function(){
    var imgs = document.getElementsByTagName("img");
    for(var i =0;i<imgs.length;i++){
        imgs[i].addEventListener("mouseover",getInfo, false);
        imgs[i].addEventListener("mouseout",removeWindow,false);
    }
}
function getInfo(){
    xmlhttp = new XMLHttpRequest();
    //准备请求
    if(xmlhttp){
        //xmlhttp = new XMLHttpRequest();
        var value = this.getAttribute("id");
        var url = "https://img-blog.csdn.net/20170807162450659?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhbnRvdXh1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center";
        xmlhttp.open('Post',url,true);
        xmlhttp.onreadystatechange = showWindow;
        xmlhttp.send(null);
        return false;
    }
}
//计算弹出的位置
function comPos(obj){
    var rect = obj.getBoundingClientRect();
    console.log(rect);
    var height ;
    if(rect.height){
        height = rect.height;
    }else{
        height = rect.bottom - rect.top;
    }
    var top = rect.top +height +10;
    return [rect.left,top];
}
//处理返回
function showWindow(){
    if(xmlhttp.readyState ==4 && xmlhttp.status ==200){
        var response = xmlhttp.responseText.split("#");
        var img = document.getElementById("3");
        console.log(img);
        if(!img) return;
        //派生弹出的位置
        var loc = comPos(img);
        var left = loc[0]+'px';
        var top = loc[0]+'px';
        //创建弹出
        var div = document.createElement("popup");
        div.id = "popup";
        //
        //var txt = document.createTextNode(response[1]);
        var txt =document.createTextNode("text");
        div.appendChild(txt);
        //样式化弹出
        div.setAttribute("class","popup");
        div.setAttribute("style","left:"+left +";top:"+top);
        document.body.appendChild(div);
    }
}
function removeWindow(){
    var popup = document.getElementById("popup");
    if(popup){
        popup.parentNode.removeChild(popup);
    }
    return false;
}
</script>
</body>
</html>