zoukankan      html  css  js  c++  java
  • JS超链接动态显示图片

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    <meta charset="utf-8" />
        <script>
            onload = function () {
                var al = document.getElementById('al');
                al.onmouseover = function () {
                    if (document.getElementById('dv')) {
                        document.body.removeChild(document.getElementById('dv')); //防止重复添加
                    }

                    var dvObj = document.createElement('div');
                    dvObj.id = 'dv';
                    var imgObj = document.createElement('img');
                    imgObj.src = '2.jpg';
                    imgObj.width = '200';//不可以加px
                    imgObj.height = '200';
                    dvObj.appendChild(imgObj);
                    dvObj.style.position = 'absolute';
                    dvObj.style.left = this.offsetLeft + 'px';
                    dvObj.style.top = this.offsetTop + this.offsetHeight + 'px';



                    document.body.appendChild(dvObj);


                }
                al.onmouseout = function () {
                    if (document.getElementById('dv')) {
                        document.body.removeChild(document.getElementById('dv'));
                    }
                }
            }
        </script>
    </head>
    <body>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a id="al" href="http://www.baidu.com">百度一下</a>
        <!--<img src="2.jpg" width="200" height="200"/>-->
    </body>
    </html>
  • 相关阅读:
    各种居中
    React 高阶组价详解
    node 基本操作
    Spring中Quartz的配置
    Java总结篇系列:Java多线程(二)
    Java总结篇系列:Java多线程(一)
    使用 VisualVM 进行性能分析及调优
    Nginx负载均衡配置实例详解
    使用Jenkins配置自动化构建
    Zabbix中文使用手册
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434856.html
Copyright © 2011-2022 走看看