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

最新推荐文章于 2022-02-27 01:59:57 发布

CGGAO

最新推荐文章于 2022-02-27 01:59:57 发布

阅读量128

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/Tanghongchang/p/6649408.html

版权

鼠标移入移出事件练习

建一个长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

CGGAO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【移入移出事件练习】【菜单】【选项卡】 -------this使用

鼠标移入移出事件练习建一个长100x100的红色 div，鼠标移入变为200x200绿色.a {width:100px;height:100px;background-color:red ;}————————————————————————————————<body> <div class="a"></...
复制链接

扫一扫