Javascript实现两张图片的延迟加载
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div
{
float: left;
margin: 10px;
} #div1
{
width: 90px;
height: 50px;
background-color: red;
} #div2
{
width: 250px;
height: 200px;
background-color: grey;
display: none;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2'); oDiv1.onmouseover = function () {
setTimeout(function () {
oDiv2.style.display = "block";
}, 100); };
var a
oDiv1.onmouseout = function () {
a = setTimeout(function () {
oDiv2.style.display = "none";
}, 1000); }; oDiv2.onmouseover = function () {
clearTimeout(a);
}
oDiv2.onmouseout = function () {
setTimeout(function () {
oDiv2.style.display = "none";
}, 100);
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
Javascript实现两张图片的延迟加载的更多相关文章
- 使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】
CSS3 Canvas 实现两张图片合成一张图片 需求 需求:在项目中遇到将一张固定图片和一张二维码图片合成一张新图片,并且用户能够将图片保存下载到本地. 思路:使用 CSS3 中的 Canvas 将 ...
- opencv_判断两张图片是否相同
QQ:231469242 pip install opencv 如果找不到版本,去非官方下载opencv第三方包http://www.lfd.uci.edu/~gohlke/pythonlibs/ 下 ...
- VS Code - Debugger for Chrome调试JavaScript的两种方式
VS Code - Debugger for Chrome调试JavaScript的两种方式 最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrom ...
- javascript使用两个逻辑非运算符(!!)的原因
javascript使用两个逻辑非运算符(!!)的原因: 在有些代码中可能大家可能会注意到有些地方使用了两个逻辑非运算符,第一感觉就是没有必要,比如操作数是true的话,使用两个逻辑非的返回值还是tr ...
- HTML两张图片叠加问题的进一步修改
要想两张图片叠加,只需在circle添加一个Position:absolute就OK了 以上几步,很多大侠前辈都已经说过,相信不用再啰嗦,我想说的是一种扩展,将示例放到右边,可能因为我悟性低,研究了一 ...
- javascript保留两位小数
原文地址http://blog.csdn.net/he20101020/article/details/8503308 <script type="text/javascrip ...
- JavaScript获取两个时间的时间差
<html><head><title>JavaScript计算两个时间差</title><meta http-equiv="conten ...
- Java 比较两张图片的相似度
import java.awt.image.BufferedImage; import java.io.File; import javax.imageio.ImageIO; /** * 比较两张图片 ...
- iOS把两张图片合成一张图片
0x00 步骤 先读取两张图片把创建出CGImageRef 创建上下文画布 把图片依次画在画布指定位置上 从上下文中获得合并后的图片 关闭上下文 释放内存 0x01 代码实现 - (void)comp ...
随机推荐
- Codevs 1009 产生数
题目描述 Description 给出一个整数 n(n<10^30) 和 k 个变换规则(k<=15). 规则: 一位数可变换成另一个一位数: 规则的右部不能为零. 例如:n=234.有规 ...
- SecureCRT远程控制ubuntu
如果你拥有两台电脑一台是ubuntu,另一台是笔记本电脑,而你又想在远程控制你的ubuntu,那么SecureCRT就可以用了. 1:首先在你的ubuntu电脑上安装SSH服务 :apt-get i ...
- Javascript原型链
原型链的关系 在Javascript中,只要创建了一个新函数,就会为该函数创建prototype属性,指向函数的原型对象,Object.prototype是所有对象最顶层的原型.所有对象都继承由Obj ...
- 将word中的“空格” 转换为换行符
- Hello，cnblog。
This my blog
- MediaRecorder类介绍
audiocallbackvideojavadescriptorencoding 目录(?)[+] 找到个MediaRecorder类介绍和大家分享一下. Mediarecorder类在官网的介绍和在 ...
- fast_recovery_area无剩余空间（ORA-19815）
一.问题现象 --执行日志切换时,夯住 SQL ('/u01/oradata/oracle/redo04.log') size 50m; SQL> alter system switch log ...
- JDBC 连接数据库
JAVA使用JDBC访问数据库的步骤: 1. 得到数据库驱动程序 (导包) 2. 创建数据库连接 3. 执行SQL语句 4. 得到结果集 5. ...
- 流水线（pipe-line）简介
1.什么是流水线设计技术? 答:所谓流水线设计实际上是把规模较大.层次较多的组合逻辑电路分为几个级,在每一级插入寄存器组并暂存数据. K级就是有K个寄存器组,从上到下没有反馈电路. 2.流水线设计的深 ...
- C++中的仿函数,std::function和bind()的用法
1.仿函数:又叫std::function,是C++中的一个模板类 2.C语言中的函数指针: int add(int a,int b) { return a+b; } typedef int (*f ...