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插件浏览图片
随机推荐
- php实现 简单密码（代码颜色变化）
php实现 简单密码(代码颜色变化) 一.总结 一句话总结:写代码的时候一定要关注代码的颜色变化,不然低级错误害死人.常量变量会有不同颜色,所以$str少$符号变成常量的时候很容易发现. 1.变量$ ...
- 微信开发学习日记（六）：weiphp框架
最近重点在看weiphp这个开源的第三方微信公众平台框架. 在网上找微信资料,找到了这个.很早之前,就初步学习了Thinkphp和Onethink2个开源框架,当看到weiphp是用这2个框架开发的时 ...
- 百度echart--Uncaught Error: Component series.wordCloud not exists. Load it first.
百度echart--Uncaught Error: Component series.wordCloud not exists. Load it first. 一.总结 一句话总结:关注报的错.可以通 ...
- [NPM] Create a node script to replace a complex npm script
In this lesson we will look at pulling out complex npm script logic into an external JavaScript file ...
- thinkphp5开发规范（加强复习之前的）
thinkphp5开发规范(加强复习之前的) 一.总结 一句话总结:和类相关的采用驼峰命名法:变量,函数,类,方法,属性采用驼峰命名发:数据库及文件及配置参数是小写字母加下划:常量大写加下划线 1.T ...
- html5中input的type类型有哪些（总结）
html5中input的type类型有哪些(总结) 一.总结 一句话总结:时间.颜色.(邮件.电话.url).(数字.数字范围).搜索search 二.html5中input的type类型 值 描述 ...
- Windows下的bat中文乱码问题
起初拿到一个bat文件,我在修改时看到编码是gb2312,我就直接将其转变为了utf8...但是在执行后的黑窗口出现中文乱码问题,最后网上获取帮助是修改编码为ANSI编码,确实不出现乱码了,ANSI是 ...
- 菜鸟学习Spring——60s利用JoinPoint获取參数的值和方法名称
一.概述 AOP的实现方法在上两篇博客中已经用了两种方法来实现如今的问题来了尽管我们利用AOP,那么client怎样信息传递?利用JoinPoint接口来实现client给详细实现类的传递參数. 二. ...
- springboot启动tomcat报错java.lang.NoClassDefFoundError: javax/el/ELManager仅记录
Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'o ...
- CodeBlocks环境搭建及创建第一个C++程序
某业界大牛推荐最佳的途径是从raytracing入门,所以本屌开始学习<Ray Tracing In One Weekend>. 该书是基于C++的.本屌从未学过C++.感觉告诉我,要先搭 ...