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 ...
随机推荐
- wage
#include<iostream> using namespace std; int main() { double wage1,wage2,time; cout<<&quo ...
- RZ10
设定一些系统参数 例如在生成table maintenance的时候 由于表格结构复杂 导致生成维护程序时 超出了默认的内存限制 这时候可以通过RZ10 修改 zzta/dynpro_area ...
- c++11:function的用法
function是函数.函数对象.函数指针.和成员函数的包装器,可以容纳任何类型的函数对象,函数指针,引用函数,成员函数的指针 普通函数 #include <functional> voi ...
- linux系统启动流程
BIOS: (Basic Input Output System)基本输入输出系统,一般保存在主板上的BIOS芯片中 BIOS是计算机启动时运行的第一个程序,负责检查硬件并且查找可启动设备. 可启动设 ...
- uniform 中checkbox通过jquery 选中
你是否曾经为不能修改多选框.单选框.文件选择框的样式而郁闷呢,是否想过控制它们的样式且兼容所有浏览器呢?我现在给你推荐的这个jQuery表单美化插件Uniform就可以解决这些问题. Uniform可 ...
- [大牛翻译系列]Hadoop（10）MapReduce 性能调优：诊断reduce性能瓶颈
6.2.3 Reduce的性能问题 Reduce的性能问题有和map类似的方面,也有和map不同的方面.图6.13是reduce任务的具体的执行各阶段,标识了可能影响性能的区域. 这一章将介绍影响re ...
- 高德amap 根据坐标获取的地址信息
高德地理逆地理编码接口List<List<Address>> lists = coder.getFromLocation(33.00, 116.500, 3, 3, 3, 50 ...
- 节点属性（DOM对象）
节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...
- 当年的笔记_apache配置虚拟主机
下午需要,在网上找了一堆,没找到合适的,翻出来自己当年的笔记,还是自己记的容易理解. 解决方案1:通过端口来区分 1>添加一个虚拟主机1.在d盘下新建www目录,如:d:/www. 2.修改ht ...
- CLR via C# 序列化读书笔记
1. 序列化格式类 a. 二进制BinaryFormatter b. XML流 NetDataContractSerializer c. CLR类据类型与非CLR数据类型之间互操作 XmlSerial ...