鼠标移入移出事件练习

建一个长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. .net framework 4.5 +steeltoe+ springcloud（三）实现Hystrix断路器

    在基于.net framework的服务客户端实现断路器功能,基本项目创建步骤可以参照我的另一篇发现和调用服务的笔记,地址:http://www.cnblogs.com/troytian/p/8621 ...

  2. 微信小游戏canvas操作

    这几天在做项目的时候,想在游戏画面之前,在Canvas上面画上一张背景图,代码如下     let ctx = canvas.getContext('2d')    export default cl ...

  3. C# Argument 'picture' must be a picture that can be used as an Icon

    Scenario: 创建了一个WinForm的小程序,希望将它显示在任务栏,所以在工具栏中的“公共控件”里,拖入NotifyIcon控件—notifyIcon1,这个是程序运行任务栏右侧通知区域图标显 ...

  4. nodejs学习(imooc课程笔记, 主讲人Scott)

    课程地址: 进击Node.js基础(一) 进击Node.js基础(二) 1. nodejs创建服务器 var http = require('http'); //加载http模块 //请求进来时, 告 ...

  5. C语言通过匿名管道实现反弹式CMDShell

    #pragma comment(lib,"ws2_32.lib") #ifdef _MSC_VER #pragma comment( linker, "/subsyste ...

  6. Windows 出现了回声 & 微软账号无法登陆

    Windows 出现了回声,第一反应是杜比音效偷偷背着我开启了客厅模式(后面看了下并没有这个模式,后话了...). 再我尝试打开它发现提示网络无法连接,于是我就直接卸载了,但回声依能没有解决. 后面我 ...

  7. Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用

    一,数据共享 1.  安装: npm install vuex --save 2. 在src目录下 新建state文件夹,新建index.js文件 3. 创建一个 store import Vue f ...

  8. Vue2.5开发去哪儿网App 第三章笔记 上

    1.  vue 生命周期函数 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 ...

  9. 持续集成 TeamCity 的配置与使用

    环境:实现自动编译与自动化测试,发布到远程服务器,环境 VS2015 +WIN2008R2 什么是TeamCity TeamCity是由Jetbrains开发的一款功能强大的持续集成(Continue ...

  10. JDK并发包总结

    本文主要介绍jdk中常用的同步控制工具以及并发容器, 其结构如下: 同步控制工具类 ReentrantLock 简而言之, 就是自由度更高的synchronized, 主要具备以下优点. 可重入: 单 ...