JS 读取集合里面的信息

最新推荐文章于 2024-04-17 15:55:02 发布

白沙王

最新推荐文章于 2024-04-17 15:55:02 发布

阅读量696

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50784508/article/details/131157154

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #showCountry{
            /*绝对定位*/
            position:absolute;
            /*不可见*/
            display:none;
            /*宽度*/
            width:200px;
            /*高度*/
            height:100px;
            /*边框像素，边框颜色*/
            border:1px solid red;
            /*背景颜色*/
            background-color:beige;
            /*文本颜色*/
            color:blue;
        }
    </style>
    <script>
        //'zg'为键[]为值
        var list = {
            'zg': ['中国', '北京', '牡丹', '世界第二大经济体'],
            'mg': ['美国', '华盛顿', '玫瑰', '白人与黑人一起劳动，却想到仇视'],
            'rb': ['日本', '东京', '樱花', '世界文明的两样东西：忍者和A片'],
            'hg': ['韩国', '首尔', '无穷', '民族意识超强']
        };
        onload = function () {
            //获取所有图片
            var imgs = this.document.getElementsByTagName('img');
            //遍历所有图片
            for (var i = 0; i < imgs.length; i++) {
                //给每个图片增设鼠标移动事件
                imgs[i].onmouseover = function (e) {
                    //获取div
                    var div1 = document.getElementById('showCountry');
                    //定义div可见
                    div1.style.display = "block";
                    //通过图片的Id获取list集合里面的数组
                    var msg = list[this.id];
                    //将数组全部信息赋值给msgStr
                    var msgStr = '国家:' + msg[0] + '<br>首都:' + msg[1] + '<br>国花:' + msg[2] + '<br>描述:' + msg[3];
                    //将msgStr信息赋值给div文本中
                    div1.innerHTML = msgStr;
                    //div出现的坐标
                    div1.style.left = e.clientX + "px";
                    div1.style.top = e.clientY + "px";
                };
                //给没给图片增设鼠标移开事件
                imgs[i].onmouseout = function () {
                    var div1 = document.getElementById('showCountry');
                    //定义div不可见
                    div1.style.display = "none";
                };
                //给每个图片赋予尺寸
                imgs[i].style.width = 100 + "px";
                imgs[i].style.height = 100 + 'px';
            }
        };
    </script>
</head>
<body>
    <img id="zg" src="images/zg.jpg" />
    <img id="mg" src="images/mg.jpg" />
    <img id="rb" src="images/rb.jpg" />
    <img id="hg" src="images/hg.jpg" />
    <div id="showCountry"></div>
</body>
</html>