鼠标移入移出事件练习

建一个长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使用的更多相关文章

  1. 第十五篇 JS 移入移出事件 模拟一个二级菜单

    JS 移入移出事件 模拟一个二级菜单   老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,on ...

  2. js鼠标移入移出事件会被子元素触发解决方法

    问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.

  3. Vue 鼠标移入移出事件

    Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style   现在开始代码示例 <template> <div class="pc&qu ...

  4. jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）

    1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...

  5. Qt 为QPushButton、QLabel添加鼠标移入移出事件

    QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...

  6. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  7. Javascript和jquery事件-鼠标移入移出事件

    javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...

  8. JS添加、设置属性以及鼠标移入移出事件

    源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  9. javascript父级鼠标移入移出事件中的子集影响父级的处理方法

    一.我们先分析其产生的原因: 1.当鼠标从父级移入子集时触发了父级的两个事件:a.父级的mouseout事件(父级离开到子集):b.由于事件冒泡影响,又触发了父级的mouseover事件(父级移入父级 ...

随机推荐

  1. [C# 面试总结]9个点如何画10条线

    问题描述 9个点画10条直线,要求每条直线上至少3个点,相信这道理题目很多朋友在面试的时候都遇到过的(同时自己在面试的时候也遇到过),所以这里记录下来以备复习. 解决方法1:

  2. Redis 5.0 安装

    下载安装RedisServer mkdir –p /data/download && cd /data/download wget http://download.redis.io/r ...

  3. ASP.NET Core开源地址

    https://github.com/dotnet/corefx 这个是.net core的 开源项目地址 https://github.com/aspnet 这个下面是asp.net core 框架 ...

  4. C# 移动及限制移动距离

    public class PlaneMove : MonoBehaviour { //h:水平方向的控制,v:前后方向的控制 float h,v; //Speed:飞机的飞行速度 public flo ...

  5. C# 动态创建数据库三（MySQL）

    前面有说明使用EF动态新建数据库与表,数据库使用的是SQL SERVER2008的,在使用MYSQL的时候还是有所不同 一.添加 EntityFramework.dll ,System.Data.En ...

  6. Spring IOC 容器源码分析 - 创建单例 bean 的过程

    1. 简介 在上一篇文章中,我比较详细的分析了获取 bean 的方法,也就是getBean(String)的实现逻辑.对于已实例化好的单例 bean,getBean(String) 方法并不会再一次去 ...

  7. BigDecimalUtils

    package com.sprucetec.tms.utils; import java.math.BigDecimal;import java.text.SimpleDateFormat;impor ...

  8. linux 时间相关

    CentOS7 正确修改时区方法 ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime

  9. vs2017配置pthread.h的方法

    一.背景(以下为走不通的配置方法!) 笔者最开始配置pthread.h,采用的是vs自动安装的方法,如图所示. 点击完“管理NuGet程序包”之后,弹出一个页面,如下,在“浏览”中输入pthread. ...

  10. 《Python编程从入门到实践》--- 学习过程笔记(2)变量和简单数据类型

    一.变量无需声明 二.变量命名规则 (1)变量名只能包括字母.数字和下划线: (2)变量名不能包含空格: (3)变量名不能使用Python关键字和函数名(保留字不可以做变量名); (4)简短易懂,清晰 ...