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插件浏览图片
随机推荐
- thinkphp缩略图
<?php class IndexAction extends Action { public function index() { $Photo = M('Photo'); $list = $ ...
- Drupal 7 模块开发 建立模块帮助信息（hook_help）
建立模块请參考 <Drupal 7 模块开发 建立> 假设你要支持中文,文件格式必须保存为 UTF-8.NO BOM ------------------------------ hook ...
- Make chrome extension
How to Make a Chrome Extension. https://robots.thoughtbot.com/how-to-make-a-chrome-extension Skip to ...
- 【u009】瑞瑞的木板
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 瑞瑞想要亲自修复在他的一个小牧场周围的围栏.他测量栅栏并发现他需要N(1≤N≤20,000)根木板,每 ...
- [CSS Flex] Flex direction
flex-direction: main two 'row' or 'column', you can use reverse also.
- 浏览器jsp、html之间的关系
浏览器html.jsp之间的关系 1.HTML能直接通过浏览器打开,而JSP仅仅能公布到Tomcatserver才干打开. 2.HTML中不能嵌套Java代码,而JSP中能够嵌套Java代码: 3.H ...
- Java多线程编程— 概念以及经常使用控制
多线程能满足程序猿编写很有效率的程序来达到充分利用CPU的目的,由于CPU的空暇时间可以保持在最低限度.有效利用多线程的关键是理解程序是并发运行而不是串行运行的.比如:程序中有两个子系统须要并发运行, ...
- 细说Oracle中NULL值
1.NULL是什么? NULL表示UNKNOW(未知),其不代表不论什么值. 比如一行中某列没有不论什么值即为NULL. ORACLE同意不论什么一种数据类型的字段为空,除了下面两种情况: 1)主键字 ...
- 将jar安装到本地mvn仓库
声明:仅限于将maven Repository下载的jar(使用maven打包的jar)安装到本地的maven仓库中,不保证全部成功,最初的时候添加依赖发现下载始终不成功,只能手动下载,但是手动下载完 ...
- 数据结构 Tricks（一）—— 父节点和左右孩子索引号之间的关系
如果以第 0 个位置开始标记树根节点,则第 i 个结点的左右孩子分别为: 2i+1 2i+2 反之,如果一个结点的标号为 i,则其父节点为: i/2:i 为左孩子结点: i/2-1:i 为右孩子结点: ...