【移入移出事件练习】【菜单】【选项卡】 -------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[0].onmouseover = function () {v[0].style.width = "200px";v[0].style.height = "200px";v[0].style.backgroundColor = "blue";}v[0].onmouseout = function () {v[0].style.width = "100px";v[0].style.height = "100px";v[0].style.backgroundColor = "red";}</script>

View Code

*** 在用 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;if (a == 0)b = backgroundColor = "red";else if (a == 1)b = backgroundColor = "yellow";else if (a == 2)b = backgroundColor = "blue";else if (a == 3)b = backgroundColor = "green";else if (a == 4)b = backgroundColor = "violet";return b;}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 == "black") {this.style.backgroundColor = "black";}if (this.style.backgroundColor == "gray") {this.style.backgroundColor = color(this.index);}}//点击事件v[i].onclick = function () {for (var j = 0; j < v.length; j++) {v[j].style.backgroundColor = color(j)}this.style.backgroundColor = "black";}}
</script>

View Code

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: 100%;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 class="div2" style="z-index: 101;">111111</div><div class="div2">222222</div><div class="div2">333333</div><div class="div2">444444</div><div class="div2">555555</div><div class="div2">666666</div>
</body>
</html>
<script type="text/javascript">var oDiv1s = document.getElementsByClassName('div1');var oDiv2s = document.getElementsByClassName('div2');var zind = 102;for (var i = 0; i < oDiv1s.length; i++) {oDiv1s[i].index = i;  //标记一下各选项卡的索引//点击事件oDiv1s[i].onclick = function () {for (var j = 0; 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>

View Code

**** 将下拉菜单与选项卡放到一个页面上了

例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>

转载于:https://www.cnblogs.com/Tanghongchang/p/6649408.html

【移入移出事件练习】【菜单】【选项卡】 -------this使用相关推荐

避开移入移出事件内部div干扰事件，e是function(e)的e
// 避开移入移出事件内部div干扰事件 // e是function(e)的elet element = e.toElement || e.relatedTarget;if (element.clas ...
js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){$(".weixinTop").show();},function( ...
vue按钮移上去显示提示_vue 鼠标移入移出事件（移入出现按钮），element-ui表格移入移出...
效果图: 注:@mouseenter="enter(index)" @mouseleave="leave()" 重点下载删除 data() { retu ...
html鼠标移入移除事件,js鼠标移入移出事件样例
javaScript实例 li{background-color:#eee;height:25px;margin-top:2px;} //添加鼠标移入移出事件 function fun(){ //获取 ...
jq鼠标移入移出显示和隐藏_jQuery实现鼠标移入移出事件切换功能示例
这篇文章主要介绍了jQuery实现鼠标移入移出事件切换功能,结合实例形式分析了jQuery不同版本处理鼠标事件响应与触发相关操作技巧,需要的朋友可以参考下. jQuery实现鼠标移入移出事件切换功能 ...
vue鼠标移入移出事件注意事项
发生冒泡事件今天在写一个鼠标的移入移出的事件,使用mouseout和mouseover期间,踩了一个大坑,经过半天的排查,终于发现是发生了冒泡事件. 把mouseout和mouseover绑在父元素 ...
鼠标移入移出事件，mouseover、mouseenter区别
简单介绍: js中有两组鼠标移入移出事件:(旧的)mouseover.mouseout与(新的)mouseenter.mouseleave,不建议混着使用. 两者的区别是,新的鼠标移入移出事件,去掉了 ...
DOM鼠标移入移出事件
1.支持冒泡的移入移出事件(子元素可继承) (1)鼠标移入:onmouseover (2)鼠标移出:onmouseout 2.不支持冒泡的移入移出事件(子元素不可继承) (1)鼠标移入:onmouse ...
整理查找的鼠标悬浮移入移出事件
鼠标的移入移出事件: 一介绍鼠标的移入和移出事件分别是onmouseover和onmousemove事件. 其中,onmouseover事件在鼠标移动到对象上方时触发事件处理程序,onmousem ...
web前端开发第二阶段——鼠标移入移出事件
鼠标移入/移出事件 : 鼠标移入 :onmouseenter 鼠标移出 : onmouseleave <!DOCTYPE html> <html> <head>&l ...

【移入移出事件练习】【菜单】【选项卡】 -------this使用

【移入移出事件练习】【菜单】【选项卡】 -------this使用相关推荐

最新文章

热门文章