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>
  • 相关阅读:
    自定义simple_tag
    测试流程规范系列(2):测试计划
    测试流程规范系列(4):测试准入
    测试流程规范系列(3):测试用例
    测试流程规范系列(1):测试流程
    Jmeter系列(1):安装
    Jmeter系列(2):简介
    Jmeter系列(3):使用
    Jmeter系列(4):插件
    Jmeter系列(5):参数化
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434856.html
Copyright © 2011-2022 走看看