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插件浏览图片
随机推荐
- 洛谷 P2197 nim游戏
洛谷 P2197 nim游戏 题目描述 甲,乙两个人玩Nim取石子游戏. nim游戏的规则是这样的:地上有n堆石子(每堆石子数量小于10000),每人每次可从任意一堆石子里取出任意多枚石子扔掉,可以取 ...
- ios开发多选照片实现
#import "ViewController.h" #import <Photos/Photos.h> @interface ViewController () &l ...
- css样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- php面试题12（多态web服务器共享session的方法：将session存到数据库）（$val=&$data[$key];）
php面试题12(多态web服务器共享session的方法:将session存到数据库)($val=&$data[$key];) 一.总结 1.多态web服务器共享session的方法: ...
- ITFriend创业败局(四)：菜鸟CEO的自我修养
自创业自封CEO以来,短短3个月,又经历了无数的磨练,快速成长中. 创业不同于打工,他要求你必须有全局观和综合能力,技术.市场.商务,啥都得会,还要处理各种各样的问题和矛盾. 根据个人经历,我总结了以 ...
- WINDOWS 同步（Interlocked，InterlockedExchangeAdd，Slim读/写锁，WaitForSingleObject，CreateWaitableTimer等等）
NOTE0 在以下两种基本情况下,线程之间需要相互通信: 需要让多个线程同时访问一个共享资源,同时不能破坏资源的完整性: 一个线程需要通知其它线程某项任务已经完成 1.原子访问:Interlocked ...
- 英文构词法 —— circum- 前缀
1. - circum-:表示环绕,周围,圆周: circle:圆:循环: circumference:圆周,周长,胸围: circumstance:环境: circumnavigation:环球航行 ...
- 【非常高%】【codeforces 733B】Parade
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- Android——四大组件、六大布局、五大存储
一.android四大组件 (一)android四大组件详解 Android四大组件分别为activity.service.content provider.broadcast receiver. 1 ...
- C# 静态构造函数，静态变量执行顺序（升华版）
上篇 是基本语法基础下的执行顺序,包括继承这个维度下的执行顺序,我们可以依照的规律顺下来,下面我们看下一些摸不到头脑的情况 我们实验 一个 类中的方法 去调用另一个非继承类的情况, 我们主要看下 ...