JavaScript动态显示详情信息框(绝对定位)

更多获取位置方法>>>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        /**{
            margin:0px;
            padding0px;
        }*/
        #person {
            height: 200px;
            width: 200px;
            position: absolute;/*详情信息框，绝对定位*/
            background-color: aqua;
            text-align: center;
            display: none;
        }
        #imgs{
            height:50px;
            width:50px;
        }
    </style>
    <script>
        onload = function () {
            var data = {
                "../contens/btn3.png": ["张三", "男", "../contens/btn3.png"],
                "../contens/5.jpg": ["李四", "男", "../contens/5.jpg"]
            };
            //显示两张图片
            for (var i in data) {
                var imgs=document.createElement('img');
                imgs.src = i;//设置图片显示路径
                imgs.style.height = "100px";
                imgs.style.width = "100px";
                document.body.appendChild(imgs);
                //为每一个图片添加鼠标悬浮事件
                imgs.onmouseover = function () {
                    var thisdatas = data[this.getAttribute('src')];//获取该元素的详细信息
                    document.getElementById("name").value = thisdatas[0];//姓名信息
                    document.getElementById("sex").value = thisdatas[1];
                    document.getElementById("imgs").src = thisdatas[2];
                    var person = document.getElementById('person');
                    //offsetHeight元素本身高度(不包括边框和外边距，offsetTop本元素的上边距(距上顶窗口))
                    person.style.top = (this.offsetHeight + this.offsetTop) + "px";
                    //offsetLeft本元素的上边距(距左边窗口)
                    person.style.left = (this.offsetLeft) + "px";
                    person.style.display = "block";
                  
                }
                imgs.onmouseout = function () {
                    document.getElementById('person').style.display = "none";//隐藏用户详情块级元素
                }
            }
        }
    </script>
</head>
<body id="by">
    <!--用户详情信息展示-->
    <div id="person">
        姓名：<input id="name" type="text" value="" /><br /> 性别：
        <input id="sex" type="text" value="男"><br />
        <input type="image" id="imgs" src="" />
    </div>
</body>
</html>
.Selected
发布了26 篇原创文章 · 获赞 5 · 访问量 6353
私信关注
JavaScript动态显示详情信息框(绝对定位)

猜你喜欢
