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>
<a id="al" href="http://www.baidu.com">百度一下</a>
<!--<img src="2.jpg" width="200" height="200"/>-->
</body>
</html>
JS超链接动态显示图片的更多相关文章
- 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容
01 HTML HTML :Hypertext Markup Language 超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...
- js多种切换图片
分享通过js实现多种图片切换特效,这里只有手动切换哦,自动效果需自写,效果地址:http://dwz.cn/1drD5u. 下载地址:http://***/download/index/52209 适 ...
- [js开源组件开发]js轮播图片支持手机滑动切换
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...
- js实现网页图片延时加载的原理和代码 提高网站打开速度
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
- webpack下css/js/html引用图片的正确方式
在webpack的处理下,为了使引用的图片被打包编译(以把src的图片文件编译到dist中或者对src的文件进行base64编码),应使用如下引用方式: 1. 在html/ejs等中引用图片: 借助r ...
- jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
- 【js】【图片瀑布流】js瀑布流显示图片20180315
js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...
- Viewer.js插件浏览图片
https://www.jianshu.com/p/e3350aa1b0d0 Viewer.js插件浏览图片 Viewer.js插件浏览图片 Viewer.js插件浏览图片
随机推荐
- 如何编辑SDE数据库（转载）
转自原文 如何编辑SDE数据库(转载) 如何编辑SDE数据(转自ESRI中国社区) (2008-12-15 17:26:41) 很多刚入门的朋友对SDE数据并不太了解,接二连三的在社区里面发问,有时也 ...
- [React Unit Testing] React unit testing demo
import React from 'react' const Release = React.createClass({ render() { const { title, artist, outO ...
- c3p0 xml配置文件模版
<c3p0-config> <default-config> <property name="driverClass">com.mysql.jd ...
- 编辑器sublime、终端运行python
sublime编辑器 Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用) Sublime Text是由程序员Jon Skinner于2008年1月份 ...
- js匿名自执行函数
匿名自执行函数:没有方法名的函数闭包:闭包是指有权访问另一个函数作用域变量的函数: 通过一个实例来解释: 从网上找到了一个案例,使用了for循环.匿名自执行函数.setTimeout. 案例1: va ...
- CSDN code使用教程之git使用方法具体解释
首先须要下载GITclient.http://git-scm.com/downloads. . . 然后再code.csdn.net上面创建一个项目,假设 你的项目已经存在.那么请建立项目 ...
- Android 面试之横竖屏切换的Activity生命周期
public class EngineerJspActivity extends Activity { private static String Tag = "EngineerJspAct ...
- Android中获取当前位置的使用步骤
在Android中得到当前位置的步骤 1.在AndroidManifest.xml中声明权限 android.permission.ACCESS_FINE_LOCATION(或者android.per ...
- 76个值得你注意的erlang编程习惯
http://www.tuicool.com/articles/ZNzuyu 前言 学习Erlang的时候在书的留白处随手记录了一些东西,还有一些记录在了demo的注释里面,今天抽时间整理出来了一部分 ...
- KVO的使用（1）
1.在某个类中添加下面方法: -(void)viewWillAppear:(BOOL)animated{ [[NSNotificationCenter defaultCenter] addObserv ...