<!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>

JS超链接动态显示图片的更多相关文章

  1. 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容

    01 HTML HTML :Hypertext Markup Language   超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...

  2. js多种切换图片

    分享通过js实现多种图片切换特效,这里只有手动切换哦,自动效果需自写,效果地址:http://dwz.cn/1drD5u. 下载地址:http://***/download/index/52209 适 ...

  3. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  4. js实现网页图片延时加载的原理和代码 提高网站打开速度

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  5. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  6. webpack下css/js/html引用图片的正确方式

    在webpack的处理下,为了使引用的图片被打包编译(以把src的图片文件编译到dist中或者对src的文件进行base64编码),应使用如下引用方式: 1. 在html/ejs等中引用图片: 借助r ...

  7. jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  8. 【js】【图片瀑布流】js瀑布流显示图片20180315

    js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...

  9. Viewer.js插件浏览图片

    https://www.jianshu.com/p/e3350aa1b0d0 Viewer.js插件浏览图片 Viewer.js插件浏览图片 Viewer.js插件浏览图片

随机推荐

  1. Navigation Pane不能设置显示标题

    https://msdn.microsoft.com/VBA/Word-VBA/articles/view-showheading-method-word https://social.msdn.mi ...

  2. [NPM] Run npm scripts with git hooks

    In this lesson we will look about how we can integrate with git hooks to help enforce a certain leve ...

  3. SEO那些事:一句代码一键分享网站

    这是很久以前就已经写过的笔记了,有一个习惯,每次遇到一个问题,都会进行百度,然后把解决问题的关键点记录下来,有人问我,为什么更新频率如此之快,大部分都是从前积累的知识点. 其实每天工作所涉及的知识点都 ...

  4. SpringBoot JPA 专题

    Error: Error starting ApplicationContext. To display the auto-configuration report re-run your appli ...

  5. Browser security standards via access control

    A computing system is operable to contain a security module within an operating system. This securit ...

  6. Android菜鸟的成长笔记(24)——Android中的振动器

    在某些时候,程序需要启动系统振动器,比如手机静音时使用振动提示用户:再比如玩游戏时,当系统碰撞.爆炸时使用振动带给用户更逼真的体验等.总之,振动是除视频.声音之外的另一种"多媒体" ...

  7. 【28.57%】【codeforces 711E】ZS and The Birthday Paradox

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  8. URAL 1577. E-mail(简单二维dp)

    给你两个子串,让你找出来一个最短的字符串包括这两个子串,输出最多的子串有多少种. 类似于最长公共子序列,相等的话长度+1,不想等的话比較长度,使用长度小的. 1577. E-mail Time lim ...

  9. Vue 兄弟组件之间传递数值

    Vue 兄弟组件之间传值 创建一个公用文件夹,在文件夹中设置一个事件处理中心,即 然后在需要设置值的组件中引入该事件处理中心 import Hub from '../../common/eventHu ...

  10. 推荐5款实用的jQuery时间轴插件

    1.使用CSS3和jQuery制作的水平时间轴 这是一个可以在PC和移动端表现非常棒的水平时间轴,它由上部水平滑块和下部时间点对应的内容区块,点击时间轴上的时间点,下部内容会滑动到对应的内容区块.使用 ...