【移入移出事件练习】【菜单】【选项卡】 -------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事件(父级移入父级 ...
随机推荐
- Javascript 金额、时间格式化
一晃2017年已经过去了,2018年已经悄然而至.回首过去的2017年,工作还是一如既往,但生活却有了翻天覆地的变化.尚还觉得自己还小的自己,在过去的一年中却完成了两件人生大事,回想起来还是一脸懵逼, ...
- Flask系列04--Flask的蓝图
flask蓝图 一.蓝图 蓝图(Blueprint),类似于实现django中路由分发那种感觉, 可以把Blueprint理解为不能被run的Flask对象 Blueprint实例化时需要的参数 基本 ...
- Atom 清空残余数据
rm -rf ~/.atom rm /usr/local/bin/atom rm /usr/local/bin/apm rm ~/Library/Preferences/com.github.atom ...
- Yii2 Apache + Nginx 路由重写
一.什么是路由重写 原本的HTTP访问地址: www.test.com/index.php?r=post/view&id=100 表示这个请求将由PostController 的 action ...
- ICMP与ping：投石问路的侦察兵
1. ICMP 协议 ICMP全称Internet Control Message Protocol,就是互联网控制报文协议.ping命令就是基于它工作的. ICMP 报文是封装在 IP 包 里面的. ...
- sublime text3: markdown 安装及常用语法简介
自己上传到 github 上的 README.rdm 文件内容显示没有“美化”,所有内容都挤在一块儿了,很不舒服. 原因是:github 的文档 README.rdm 文件使用 markdown 编辑 ...
- day 39 jq 学习入门2
---恢复内容开始--- 前情提要: jq 是用来降低js 的工作的一个组件 一:利用jq 实现动画效果 <!DOCTYPE html> <html lang="en&qu ...
- Windows + VS2013 + Dlib
Dlib是一个机器学习的C++库,包含了许多机器学习常用的算法, 而且文档和例子都非常详细. 安装有点类似于opencv,这里我从官网下载dlib-18.17到D盘 1. cmake转VS工程 这里使 ...
- golang 闭包求斐波那契数列
题目是Go指南中的闭包求斐波那契数列 package main import "fmt" // 返回一个"返回int的函数" func fibonacci() ...
- C# SaveFileDialog的用法
#region 保存对话框 private void ShowSaveFileDialog() { //string localFilePath, fileNameExt, newFileName, ...