【移入移出事件练习】【菜单】【选项卡】 -------this使用
鼠标移入移出事件练习
建一个长100x100的红色 div，鼠标移入变为200x200绿色
.a {
width:100px;
height:100px;
background-color:red ;
}
————————————————————————————————
<body>
<div class="a"></div>
</body>
</html>
<script type="text/javascript">
var v = document.getElementsByClassName('a')
v[].onmouseover = function () {
v[].style.width = "200px";
v[].style.height = "200px";
v[].style.backgroundColor = "blue";
}
v[].onmouseout = function () {
v[].style.width = "100px";
v[].style.height = "100px";
v[].style.backgroundColor = "red";
}
</script>
*** 在用 class 定位是，即使只有一个变量也要用数组表示
2、有5个导航菜单，颜色分别是红黄蓝绿紫
鼠标移入变为灰色，移除变为之前的颜色
点击变为黑色，同一时间只能有一个黑色
<!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">
.div1 {
width: 100px;
height: 50px;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="div1" style="background-color: red"></div>
<div class="div1" style="background-color: yellow"></div>
<div class="div1" style="background-color: blue"></div>
<div class="div1" style="background-color: green"></div>
<div class="div1" style="background-color: Purple"></div>
</body>
</html>
<script type="text/javascript">
//把颜色存在一个函数内
function color(a) {
var b;
)
b = backgroundColor = "red";
)
b = backgroundColor = "yellow";
)
b = backgroundColor = "blue";
)
b = backgroundColor = "green";
)
b = backgroundColor = "violet";
return b;
}
var v = document.getElementsByClassName("div1")
; i < v.length; i++) {
v[i].index = i;
//移入事件
v[i].onmouseover = function () {
this.style.backgroundColor = "gray";
}
//移出事件
v[i].onmouseout = function () {
if (this.style.backgroundColor == "black") {
this.style.backgroundColor = "black";
}
if (this.style.backgroundColor == "gray") {
this.style.backgroundColor = color(this.index);
}
}
//点击事件
v[i].onclick = function () {
; j < v.length; j++) {
v[j].style.backgroundColor = color(j)
}
this.style.backgroundColor = "black";
}
}
</script>
this 指 在它上方与它最近的 方法事件（function 函数所指向的操作）， 可理解为 这一次操作，
用在变量是一个数组，并且不确定索引的时候（即索引任意）。
当需要数组中的每个变量都需要执行一遍时（遍历），用数组[索引] 形式像下面的 v[i]
例
var v = document.getElementsByClassName("div1")
for (var i = 0; i < v.length; i++)
{
v[i].index = i; -- 将索引标记一下
v[i].onmouseover = function ()
{ //鼠标移入事件
this.style.backgroundColor = "gray";
}
v[i].onmouseout = function ()
{ //鼠标移出事件
if (this.style.backgroundColor == "gray")
{
this.style.backgroundColor = color(this.index);
} -- color 用 v[i].index = i; 找到定位
}
v[i].onclick = function () //点击事件
{
for (var j = 0; j < v.length; j++)
{
v[j].style.backgroundColor = color(j)
} -- 点击时，先将所有颜色变为之前的颜色
this.style.backgroundColor = "black";
} -- 这次点击事件，将颜色变为黑色
}
菜单，选项卡
<!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 ">
.div1
{
width: 100px;
height: 30px;
background-color: red;
float: left;
margin-right: 10px;
}
.div1-div
{
width: %;
height: 400px;
background-color: green;
margin-top: 30px;
display: none;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div </div>
<div </div>
<div </div>
<div </div>
<div </div>
<div </div>
</body>
</html>
<script type="text/javascript">
var oDiv1s = document.getElementsByClassName('div1');
var oDiv2s = document.getElementsByClassName('div2');
;
; i < oDiv1s.length; i++) {
oDiv1s[i].index = i; //标记一下各选项卡的索引
//点击事件
oDiv1s[i].onclick = function () {
; j < oDiv1s.length; j++) {
oDiv1s[j].style.backgroundColor = "green"; //点击时先全部变为绿色
}
this.style.backgroundColor = "red"; //点击变红色，
//选项卡切换代码
oDiv2s[this.index].style.zIndex = zind;
zind++;
}
//移入事件
oDiv1s[i].onmouseover = function () {
if (this.style.backgroundColor != "red") {
this.style.backgroundColor = "blue";
}
}
//移出事件
oDiv1s[i].onmouseout = function () {
if (this.style.backgroundColor == 'blue') {
this.style.backgroundColor = "green";
}
}
}
</script>
**** 将下拉菜单与选项卡放到一个页面上了
例2，
<!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">
.nav1 {
position:relative;
width:150px;
height:50px;
float:left;
background-color:red;
margin-right:10px;
}
.nav2 {
position:absolute;
width:300px;
height:300px;
background-color:green;
top:50px;
display:none;
}
</style>
</head>
<body>
<div class="nav1">
<div class="nav2"></div>
</div>
<div class="nav1">
<div class="nav2"></div>
</div>
<div class="nav1">
<div class="nav2"></div>
</div>
<div class="nav1">
<div class="nav2"></div>
</div>
</body>
</html>
<script type="text/javascript">
var oNav1s = document.getElementsByClassName('nav1');
var oNav2s = document.getElementsByClassName('nav2');
for (var i = 0; i < oNav1s.length; i++) {
oNav1s[i].index = i;
oNav1s[i].onmouseover = function () {
oNav2s[this.index].style.display = "block";
}
oNav1s[i].onmouseout = function () {
oNav2s[this.index].style.display = "none";
}
}
</script>
【移入移出事件练习】【菜单】【选项卡】 -------this使用的更多相关文章
- 第十五篇 JS 移入移出事件 模拟一个二级菜单
JS 移入移出事件 模拟一个二级菜单 老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,on ...
- js鼠标移入移出事件会被子元素触发解决方法
问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.
- Vue 鼠标移入移出事件
Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style 现在开始代码示例 <template> <div class="pc&qu ...
- jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）
1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...
- Qt 为QPushButton、QLabel添加鼠标移入移出事件
QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...
- js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- Javascript和jquery事件-鼠标移入移出事件
javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...
- JS添加、设置属性以及鼠标移入移出事件
源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- javascript父级鼠标移入移出事件中的子集影响父级的处理方法
一.我们先分析其产生的原因: 1.当鼠标从父级移入子集时触发了父级的两个事件:a.父级的mouseout事件(父级离开到子集):b.由于事件冒泡影响,又触发了父级的mouseover事件(父级移入父级 ...
随机推荐
- mssql中按周进行表分区的方法
创建一个包含了一个持久化计算列的表,类似于下面.然后以这个列作为分区的依据. CREATE TABLE [dbo].[test] ( ) NOT NULL , [time] [DATETIME] NU ...
- SQL SERVER的锁机制（三）——概述（锁与事务隔离级别）
五.锁与事务隔离级别 事务隔离级别简单的说,就是当激活事务时,控制事务内因SQL语句产生的锁定需要保留多入,影响范围多大,以防止多人访问时,在事务内发生数据查询的错误.设置事务隔离级别将影响整条连接. ...
- Google guava cache源码解析1--构建缓存器（1）
此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1.guava cache 当下最常用最简单的本地缓存 线程安全的本地缓存 类似于ConcurrentHas ...
- CentOS 7 - 安装Oracle JDK8
我们要在CentOS安装最新版本的JDK8,需要首先将JDK下载到服务器,然后通过操作系统自带的工具yum进行安装. 本文我们将介绍CentOS 7下JDK8的安装. 从官网下载页面找到JDK8的下载 ...
- SpringBoot使用ModelAndView时配置视图解析器
spring boot 使用视图modelandview 原文:https://www.cnblogs.com/liyafei/p/7955943.html 1:springboot使用视图解析器,添 ...
- Office 2010激活 NO KMS products detected问题
今天用office2010激活工具Office 2010 Toolkit激活安装的office2010时悲剧的遇到了这个问题,如下图: (这张图是从网上找的,不过和我遇到的问题是一样的). 然后上网搜 ...
- Docker端口映射(六)
一.容器端口映射 1.1. 外部访问容器 在启动容器时候,如果不指定参数,在容器外部是无法通过网络来访问容器内的服务的 当容器运行一些网络服务的时候,我们可以通过指定-p或者-P参数来实现能够让外部访 ...
- FastDFS高可用集群架构配置搭建
一.基本模块及高可用架构 FastDFS 是余庆老师开发的一个开源的高性能分布式文件系统(DFS). 它的主要功能包括:文件存储,文件同步和文件访问,以及高容量和负载平衡. FastDFS 系统有 ...
- Webstorm使用教程详解
Webstorm使用教程详解 Webstorm垂直分栏.左右分栏 Webstorm 主题.背景.颜色等设置的导入导出 使用WebStorm开发web前端 网页中文乱码问题的解决方案 Webstor ...
- Why does Http header contains "X-SourceFiles"?
Question: Using a FileStreamResult in ASP.NET MVC 3, I get a response header like X-SourceFiles =?UT ...