【移入移出事件练习】【菜单】【选项卡】 -------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事件(父级移入父级 ...
随机推荐
- hangfire的使用
1.安装: hangfire包.StackExchange.Redis(abp下的hangfire则安装abp.hangfire) 2.配置 startup文件configuration方法添加以下代 ...
- 网络编程-socket（二）
https://www.cnblogs.com/mys6/p/10587673.html(网络编程) 持续通话 总结 # 网络开发的架构 :C/S B/S# mac地址是什么 -身份证号# ip地址 ...
- nginx-2.nginx是什么
Nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器:同时也是一个IMAP.POP3.SMTP代理服务器: Nginx可以作为一个HTTP服务器进行网站的发布处理,另外Nginx可以 ...
- Dubbo原理实现之使用Javassist字节码结束构建代理对象
JavassistProxyFactory利用自己吗技术构建代理对象的实现如下: public <T> T getProxy(Invoker<T> invoker, Class ...
- 【多线程】：Synchronized和ReentrantLock的对比
相同点: 两者都是可重入锁,同一个线程每进入一次,锁的计数器都自增1,等到锁的计数器下降为0时才能释放锁. 底层实现对比: Synchronized是依赖于JVM实现的,而ReentrantLock是 ...
- vue.js 的起步
vue.js 的起步 转载 作者:伯乐在线专栏作者 - 1000copy 点击 → 了解如何加入专栏作者 如需转载,发送「转载」二字查看说明 介绍 vue.js 是一个客户端js库,可以用来开发单页应 ...
- C#导出Excel文件Firefox中文件名乱码
首先说明下:我的解决方法不一定适用于其他遇到该问题的人,因为情况多种多样,适合我的方法不一定适合别人,就像我在遇到问题时查到别人的解决方案放到我的代码里却不管用,所以这个方法仅供参考 这两天做了一个导 ...
- js变量提升
JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部: 'use strict'; function foo() { var x = 'Hello, ...
- c++之菱形继承问题
昨天面试问了菱形继承的问题,回答的稀巴烂,回来赶快好好学习一波!!!!! 菱形继承如下图: 上一段代码: #include<bits/stdc++.h> using namespace s ...
- jieba分词(3)
jieba分词中Tokenize的使用,Tokenize主要是用来返回词语在原文的弃之位置,下面贴上代码: #-*- coding:utf-8 -*- from __future__ import u ...