【移入移出事件练习】【菜单】【选项卡】 -------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事件(父级移入父级 ...
随机推荐
- Python：windows下scikit-learn 安装和更新
scikit-learn 报错: from sklearn.model_selection import train_test_split ImportError: No module named m ...
- MVVM Light 新手入门（1）：准备阶段
1.新建WPF空白项目. 2.NuGet 程序包中安装 3.根据MVVM分层结构,建立包含Model.View.ViewModel三层文件夹 如图: 1.View负责前端展示,与ViewModel进行 ...
- AngularJs自定义过滤器filter
AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...
- [转]据说200G网盘资料
来源:HACK学习呀 2015cracer入侵入门到精通视频教程 点我查看 trf3 一笔√带过入侵教程 点我查看 ypan [复仇者]新手入门系列(7套) 点我查看 g1tb 菜鸟入门,做的确实不错 ...
- pycharm光标变成黑框，恢复成竖线
pycharm光标变成黑框,如下图所示 解决办法: 按外接键盘上的Insert键,即可恢复.
- nginx root&alias 文件路径配置
nginx 指定文件路径有两种方式 root 和 alias,root 与 alias 主要区别在于 nginx 如何解释 location 后面的 uri,这会使两者分别以不同的方式将请求映射到服务 ...
- Java - 集成开发环境Eclipse的使用方法和技巧
00 - Eclipse教程 Eclipse 教程 01 - Eclipse设置编译和运行的环境 建议编译和运行的版本保持一致,否则请特别注意: 低编译,高运行 ---> 可行. 高编译,低运行 ...
- VS2013 编辑器
1. VS -> 本地Git -> Github 1. 右键单击解决方案,选择“将解决方案添加到源代码管理器”,选择Git 2. 切换到团队资源管理器([菜单]视图->团队资源管理器 ...
- java实现office文件预览
不知觉就过了这个久了,继上篇java实现文件上传下载后,今天给大家分享一篇java实现的对office文件预览功能. 相信大家在平常的项目中会遇到需要对文件实现预览功能,这里不用下载节省很多事.大家请 ...
- [EXP]WordPress Core 5.0 - Remote Code Execution
var wpnonce = ''; var ajaxnonce = ''; var wp_attached_file = ''; var imgurl = ''; var postajaxdata = ...