美文网首页
JavaScript鼠标移动到图片上显示描述信息

JavaScript鼠标移动到图片上显示描述信息

作者: 幻凌风 | 来源:发表于2017-08-19 19:25 被阅读10次
    鼠标移到图片上显示描述信息.png

    JavaScript原生代码实现

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            img{
                width:400px;
                height:300px;
            }
            #showCountry{
                position:absolute;
                width:300px;
                height:200px;
                background-color:lightgreen;
                color:black;
                display:none;
                border:1px solid gray;
            }
        </style>
        <script>
            var list = {
                "zg": ["中国", "北京", "牡丹", "世界第二大经济体"],
                "mg": ["美国", "纽约", "玫瑰", "白人和黑人壹起劳动"],
                "rb": ["日本", "东京", "樱花", "忍者和A片"],
                "hg": ["韩国", "首尔", "无穷", "女人喜欢整容的国度"]
            };
            window.onload = function () {
                var imgs = window.document.getElementsByTagName("img");
                for (var i = 0; i < imgs.length; i++) {
    
                    imgs[i].onmouseover = function () {
                        //获取国家信息
                        var msg = list[this.id];
                        var msgStr = "国家:" + msg[0] + "<br>首都:" + msg[1] + "<br>国花:" + msg[2] + "<br>描述:" + msg[3];
                        var showCountry = window.document.getElementById("showCountry");
                        showCountry.style.display = "block";
                        showCountry.style.left = event.clientX + "px";
                        showCountry.style.top = event.clientY + "px";
                        showCountry.innerHTML = msgStr;
                        
                    }
                    imgs[i].onmouseout = function () {
                        var showCountry = window.document.getElementById("showCountry");
                        showCountry.style.display = "none";
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="showCountry"></div>
        ![](https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C4%2C1500%2C992%3Bc0%3Dbaike180%2C5%2C5%2C180%2C60/sign=794b91c402087bf469a30da9cfe37b18/eac4b74543a98226ab2285a88a82b9014b90eb5a.jpg)
        ![](https://img.haomeiwen.com/i1687947/030c240f98b4376e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        ![](https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=b7383f64a744ad343ab28fd5b1cb6791/a5c27d1ed21b0ef43dce05d7dbc451da81cb3e10.jpg)
        ![](https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=ed806ef47ad98d1062d904634056d36b/8d5494eef01f3a29eea82dc69f25bc315c607c52.jpg)
    </body>
    </html>
    

    jQuery实现

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="script/jquery-3.2.1.js"></script>
        <script>
            var list = {
                "zg": ["中国", "北京", "牡丹", "世界第二大经济体"],
                "mg": ["美国", "纽约", "玫瑰", "白人和黑人壹起劳动"],
                "rb": ["日本", "东京", "樱花", "忍者和A片"],
                "hg": ["韩国", "首尔", "无穷", "女人喜欢整容的国度"]
            };
            $(function () {
                $("img").hover(function () {
                    var msg = list[this.id];
                    var countryInfo = "国家:" + msg[0] + "<br>首都:" + msg[1] + "<br>国花:" + msg[2] + "<br>描述:" + msg[3];
                    $("#showCountry").css({ "left": event.clientX, "top": event.clientY, "display": "block" }).html(countryInfo)
    
                }, function () {
                    $("#showCountry").css("display", "none");
                });
            })
        </script>
        <style>
            img {
                width: 400px;
                height: 300px;
            }
    
            #showCountry {
                position: absolute;
                width: 300px;
                height: 200px;
                background-color: lightgreen;
                color: black;
                display: none;
                border: 1px solid gray;
            }
        </style>
    </head>
    <body>
        <div id="showCountry"></div>
        ![](https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C4%2C1500%2C992%3Bc0%3Dbaike180%2C5%2C5%2C180%2C60/sign=794b91c402087bf469a30da9cfe37b18/eac4b74543a98226ab2285a88a82b9014b90eb5a.jpg)
        ![](https://img.haomeiwen.com/i1687947/030c240f98b4376e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        ![](https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=b7383f64a744ad343ab28fd5b1cb6791/a5c27d1ed21b0ef43dce05d7dbc451da81cb3e10.jpg)
        ![](https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=ed806ef47ad98d1062d904634056d36b/8d5494eef01f3a29eea82dc69f25bc315c607c52.jpg)
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:JavaScript鼠标移动到图片上显示描述信息

          本文链接:https://www.haomeiwen.com/subject/ditxdxtx.html