【移入移出事件练习】【菜单】【选项卡】 -------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[].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使用的更多相关文章

第十五篇 JS 移入移出事件模拟一个二级菜单
JS 移入移出事件模拟一个二级菜单老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,on ...
js鼠标移入移出事件会被子元素触发解决方法
问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.
Vue 鼠标移入移出事件
Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style 现在开始代码示例 <template> <div class="pc&qu ...
jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）
1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加注意点:可以同时添加多个相同 ...
Qt 为QPushButton、QLabel添加鼠标移入移出事件
QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...
js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
Javascript和jquery事件-鼠标移入移出事件
javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...
JS添加、设置属性以及鼠标移入移出事件
源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
javascript父级鼠标移入移出事件中的子集影响父级的处理方法
一.我们先分析其产生的原因: 1.当鼠标从父级移入子集时触发了父级的两个事件:a.父级的mouseout事件(父级离开到子集):b.由于事件冒泡影响,又触发了父级的mouseover事件(父级移入父级 ...

随机推荐

[NewCode 5] 从尾到头打印链表
题目描述输入一个链表,从尾到头打印链表每个节点的值. 题目比较水,一遍就 AC 了,来看代码: /** * struct ListNode { * int val; * struct ListNod ...
ASP .Net C# ---CSV导入导出
CSV和Excel大致相同复制下来数据传到方法里面就可以了 /// <summary> /// DataTable数据写入CSV文件 /// </summary> /// ...
SQL2014 尝试读取或写入受保护的内存。这通常指示其他内存已损坏
管理员身份运行 cmd -> 输入 netsh winsock reset
格式化json日期'/Date(-62135596800000)/'
日期经过json序列化之后,变成了'/Date(-62135596800000)/'字符串,在显示数据时,我们需要解释成正常的日期. Insus.NET和js库中,写了一个jQuery扩展方法: $. ...
sublime text syntaxdef
http://sublimetext.info/docs/en/extensibility/syntaxdefs.html
Data - 数据思维
数据思维数据思维全解析如何建立数据分析的思维框架做数据分析时,你的方法论是什么? 数据分析全流程资料,适合各路人马百度内部培训资料PPT:数据分析的道与术学会数据分析背后的挖掘思维,分析就完 ...
POJ 2696
#include<iostream> #define MAXN 1005 #include<stdio.h> using namespace std; int _m[MAXN] ...
10-04 Java 权限修饰符，类及其组成常见的修饰符
四种权限修饰符的测试 /* 权限修饰符: 本类同一个包下(子类和无关类) 不同包下(子类) 不同包下(无关类) private Y 默认 Y Y protected Y Y Y public Y Y ...
Nuget 打包
https://github.com/NuGetPackageExplorer/NuGetPackageExplorer 下载地址 1 打包的dll 中没有依赖最简单的情况,保证dll放到lib下, ...
[转]php实时输出内容
b开发中有没有碰到需要适时的将结果输出到浏览器页面而不刷新整个页面的需求呢?当你在处理一个过程需要耗时很长,但你又需要适时的知道程序当前的处理状况的时候,该怎么办呢?下面就分享一下如何使用php及时的 ...

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

【移入移出事件练习】【菜单】【选项卡】 -------this使用的更多相关文章

随机推荐

热门专题