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 3185 队列练习1
题目描述 Description 给定一个队列(初始为空),只有两种操作入队和出队,现给出这些操作请输出最终的队头元素. 操作解释:1表示入队,2表示出队 输入描述 Input Description ...
- MySQL基础操作命令
MySQL基础操作命令 1. 查看MySQL进程 ps -ef|grep mysql |grep -v grep 2. 查看MySQL端口 ss -lnt | grep 3306 3. MySQL的启 ...
- 全民wifi钓鱼来临----agnes安卓wifi钓鱼神器介绍
断断续续搞了一些无线的东西,从bt5的aircrack-ng的破无线(没怎么成功过)其实EWSA这个用GPU跑还算不错,可惜了我这显卡也只能每秒2500,到用c118在OsmocomBB基础上进行gs ...
- 利用ddmlib 实现 PC端与android手机端adb forword socket通信（转）
上篇文章讲了PC与android手机连接的办法 ,通过java调用系统命令执行adb命令操作,实际上是一个比较笨的办法. 网上查阅资料,发现google 提供了ddmlib库 (adt-bundle\ ...
- 万网域名解析到IP地址
进入https://home.console.aliyun.com/#/的阿里云控制台 再自己购买的域名列表里进行操作 添加一个A解析
- Mac OS X 10.10.2 Yosemite jdk 环境变量配置
我的Mac系统版本是OS X 10.10.2 Yosemite,为了用Eclipse做android开发,安装了jdk 1.7, 但是如果想使用IntelliJ IDE做android开发的话,就需要 ...
- 横轴墨卡托 (Transverse Mercator) 投影
横轴墨卡托 (Transverse Mercator) 投影 描述 此投影又称为高斯-克吕格投影,它与墨卡托投影相似,不同之处在于圆柱是沿经线而非赤道纵向排列.通过这种方法生成的等角投影不会保持真实的 ...
- linux设备驱动模型
尽管LDD3中说对多数程序员掌握设备驱动模型不是必要的,但对于嵌入式Linux的底层程序员而言,对设备驱动模型的学习非常重要. Linux设备模型的目的:为内核建立一个统一的设备模型,从而又一个对系统 ...
- Window.Open参数、返回值
一.window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: window.open(pageURL,name, ...
- SQL日语词汇
データベース 数据库 DATABASE インスタンス (数据库)实例 INSTANCE ユーザー 用戶 USER ログイン・ログアウト ログオン・ログオフ 登录 LOGIN/LOGOUT LOGNO/ ...