Js onmouseover和onmouseout小特效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
div{float:left;margin:20px;}
#div1{width:100px;height:100px;background: #f00;}
#div2{width:200px;height:200px;background:#ccc;display: none;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var timer=null;
oDiv1.onmouseover= oDiv2.onmouseover=function(){
clearTimeout(timer);
oDiv2.style.display="block";
}
oDiv1.onmouseout= oDiv2.onmouseout=function(){
timer=setTimeout(function(){
oDiv2.style.display="none";
},500)
} }
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
Js onmouseover和onmouseout小特效的更多相关文章
- JS:onmouseover 、onmouseout
鼠标移动到P标签上时,改变文本和边框样式 <style type="text/css"> .onmouseover { color: red; border: 1px ...
- js onmouseover与onmouseout用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JS事件之onmouseover 、onmouseout 与onmouseenter 、onmouseleave区别
疫情过后回武汉的第一天打卡,今天偶然遇到一个问题onmouseover .onmouseout 与onmouseenter .onmouseleave这些事件的区别,也看了一些博客,感觉不是很清楚,所 ...
- javascript学习-原生javascript的小特效（多物体运动效果）
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 今天为大家做的是多个物体的运动效果, 1:HTML <body> <ul> <li> ...
- javascript学习-原生javascript的小特效（改变透明度效果）
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 ( 以下效果兼容IE5+ IE5-以下没有测试哦) 今天为大家演示的效果是一个div,鼠标经过的时候透明度为100%,鼠标移出的时 ...
- javascript学习-原生javascript的小特效（简单的运动效果）
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 一:运动特效(主要是通过改变元素的left,right,height,width,opacity来达到运动的效果) 我们今天做一个 ...
- javascript学习-原生javascript的小特效（原生javascript实现链式运动）
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- javascript学习-原生javascript的小特效（多个运动效果整理）
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- 关于onmouseover和onmouseout的bug
总结了一下关于使用onmouseover以及onmouseout会出现的bug 首先简单的布局: <div id="box"> <div>这是一个内容< ...
随机推荐
- 洛谷 P1122 最大子树和
P1122 最大子树和 题目描述 小明对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题.一天他早晨骑车去上课,路上见到一个老伯正在修剪花花草草,顿时想到了一个有关修剪花卉的 ...
- IOS程序崩溃报告管理解决方案（Crashlytics 在2014-09-24）
预研Crashlytics 在2014-09-241:实现原理在原理上,Crashlytics通过以下2步完成崩溃日志的上传和分析:(1)提供应用SDK,你需要在应用启动时调用其SDK来设置你的应用 ...
- ArcGIS 教程：Workflow Manager 高速浏览
应用程序概述 Workflow Manager 用户界面提供了用于在整个作业的生命周期中创建和管理作业的工具. 下面全部信息将会在本帮助文档的兴许章节中进行具体的说明. 文件菜单 新建 - 在系统中创 ...
- C#高级编程四十八天----列表
C#中的List C#中deList怎么样?List<T>类是ArrayList类的泛型等效类,该类使用大小可按需动态增长的数组实现List<T>泛型接口. 泛型的优点:它为使 ...
- VS2012 ASP.NET 母版页的创建与使用
在做牛腩新闻公布系统的过程中,须要使用ASP.NET的母版页来抽出全部网页的公共部分,以便更好的复用自己的网页布局和设计. 首先我们来看怎样创建一个新的母版页,例如以下图所看到的: 加入之后,例如以下 ...
- Objective-C语言的 if ( self = [super init] )
我们先假设如今自己创建了个类.我们起名叫MyObject,继承于NSObject. 继承知道吧,就是你这个子类(MyObject)假设什么都不写的话,和父类(NSObject)就是一模一样的. OC里 ...
- Android ListView的item点击无响应的解决方法
假设listitem里面包含button或者checkbox等控件,默认情况下listitem会失去焦点,导致无法响应item的事件,最经常使用的解决的方法 是在listitem的布局文件里设置des ...
- 解决ubuntu中firefox浏览器总是提示找不到server的问题
这个情况在我机器上常常出现,并且时不时的给你出点问题.可是有些时候等一下就好了.或者把引擎换到百度的话它就又行得通了.. 被这个问题搞得非常烦.上网查了下说是防火墙啊之类的出问题.可是自己弄了后这个问 ...
- [计算机故障]笔记本无法启动,开机启动出现“Operating System Not Found”无法进系统
背景介绍:同事的一台索尼的笔记本,安装XP.开机启动出现“Operating System Not Found”无法进系统 诊断: 初步判断硬盘故障.但听声音,没有异响. 开机按F2进入BIOS设置. ...
- JavaScript基础 -- 焦点图轮播(转载)
首先将HTML结构搭建好: <div id="container"> <div id="list" style="left: -60 ...