【移入移出事件练习】【菜单】【选项卡】 -------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事件(父级移入父级 ...
随机推荐
- spring注解方式 idea报could not autowire
删除项目的iml文件,然后mvn重新导入 reimport
- 【Win】Clso QR Tool 二维码小工具
一个可以生成并识别二维码的windows小工具,纯绿色.不含糖. 可以通过输入文本生成二维码,或者加载本地图片.剪贴板内的图片,直接解析出二维码内容. 支持自定义LOGO. 下载文件 (当前版本:1. ...
- VS2015+MySql+EF6采坑经验总结
背景:VS2015+MySql+EF6(DB First) 采坑顺序:按照以前的记忆,操作依次如下: 1,安装 MySQL Connector/NET(不用想,装最新的,8.0.12) 2.安装 My ...
- Spring学习笔记3——消息队列(rabbitmq), 发送邮件
本节的内容是用户注册时,将邮箱地址先存入rabbitmq队列,之后返回给用户注册成功:之后消息队列的接收者从队列中获取消息,发送邮件给用户. 一.RabbitMQ介绍 如果之前对rabbitm ...
- webstorm “Unterminated statement”
使用webstorm的时候,写console.log,或者一些其他语句的时候 偶尔会出现这种提示,不是报错,就是看着别扭,应该是写法规范问题. 解决办法: 在下面空一行就行了
- underscore.js源码研究(5)
概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...
- Linq to xml修改CDATA节点值
增加节点时,我们是这样写的: xop.Document.Element("messages").Add( new XElement("message", new ...
- gensim与numpy array 互转
目的 将gensim输出的格式转化为numpy array格式,支持作为scikit-learn,tensorflow的输入 实施 使用nltk库的停用词和网上收集的资料整合成一份新的停用词表,用来过 ...
- 插入排序（java）
这星期java老师布置的作业就是实现几种常见的排序算法,由于数据结构学了丢得差不多了,今天晚上搞了一晚上才搞出来插入排序的三种算法. 首先说个与题目不搭的话,今天写
- flask开发的CMS管理系统
Dohoom 详细介绍 Dohoom 基于Python3 Flask +Mysql+ Redis开发的一个Web系统 可用于搭建(开发)个人网站, 企业官网.包含:相册模块,文章模块,小组模块,私信模 ...