您的位置：首页 > 其它

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

2017-03-31 01:12 330 查看

 

鼠标移入移出事件练习

 建一个长100x100的红色 div，鼠标移入变为200x200绿色

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

　　

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航