JS实例5
做这么一个效果 鼠标单击某个名字后变色，没选中的鼠标移动上去变色
首先布局这个效果，然后给每个表格添加单击事件onclick、鼠标放上事件onmousemove、鼠标移出事件onmouseout
容易把这几个事件弄混
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
margin:0px auto;
padding:0px;
}
#da{
width:100%;
height:280px;
}
.xiao{
width:100px;
height:20px;
background-color:#00F;
border:1px solid #FFF;
text-align:center;
line-height:20px;
vertical-align:middle;
color:#FFF;
}
.xiao:hover{
cursor:pointer;
}
</style>
</head> <body>
<div id="da">
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张海军</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张琦伟</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张胜国</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">继文楷</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张三</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">李四</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">王五</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">猎人但</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">狗剩</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">王八蛋</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">狗屎</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">滚蛋</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">哈喽</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">凯奇</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张海军</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张琦伟</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张胜国</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">继文楷</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">张三</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">李四</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">王五</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">猎人但</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">狗剩</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">王八蛋</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">狗屎</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">滚蛋</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">哈喽</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)" onmouseout="Zou()">凯奇</div>
</div>
</body>
因为是class名 所有onclick="Dian(this)" onmousemove="Fang(this)"都有个this，意思是点击自身，因为class名都一样，加上this知道单击的是哪个
先单击事件的函数
<script type="text/javascript">
function Dian(a)
{
var xiao=document.getElementsByClassName("xiao")
for(var i=0; i<xiao.length;i++)
{
xiao[i].style.backgroundColor="#00F"
}
a.style.backgroundColor="red";
}
单击变红，然后没有单击的循环变成原来的颜色
下一步写鼠标放上变色
function Fang(b)
{
var xiao=document.getElementsByClassName("xiao")
for(var i=0; i<xiao.length;i++)
{
xiao[i].style.backgroundColor="#00F"
}
b.style.backgroundColor="red";
}
这样看着是没问题，实际效果上是只有鼠标放上变色效果，鼠标单击效果没有了。这是因为优先级的关系
所以要加虚拟属性，鼠标单击后添加属性，没有单击的移出这个属性
function Dian(a)
{
var xiao=document.getElementsByClassName("xiao")
for(var i=0; i<xiao.length;i++)
{
xiao[i].removeAttribute("bs")//没有单击的就移出这个属性
xiao[i].style.backgroundColor="#00F"
}
a.setAttribute("bs",1);//随便添加一个属性，和属性值
a.style.backgroundColor="red";
}
function Fang(b)
{
var xiao=document.getElementsByClassName("xiao")
for(var i=0; i<xiao.length;i++)
{
if(xiao[i].getAttribute("bs")!="1")//根据上面设定的，用if判断一下，只要属性不等于1的就是原来的颜色，
如果没有这个条件单击事件就不存在
{
xiao[i].style.backgroundColor="#00F"
}
}
b.style.backgroundColor="red";
}
这样单击变色并且没单击的鼠标放上变色，但是鼠标移出后颜色还在所以要继续写鼠标移出后的函数，同样的是，用if判断添加的属性不等于一变回原来的颜色,目的是保证鼠标移出的时候，单击选中的不会因为鼠标移出而变色。因为鼠标单击的添加了个属性bs=1，移出变色的是bs不等于1的情况。
function Zou()
{
var xiao=document.getElementsByClassName("xiao")
for(var i=0; i<xiao.length;i++)
{
if(xiao[i].getAttribute("bs")!="1")//如果没有这个条件，单击的效果也是不存在的。
{
xiao[i].style.backgroundColor="#00F"
}
}
}
</script>
具体效果如同电脑QQ好友里选中某个好友之后，其余好友鼠标移动还有颜色变化
JS实例5的更多相关文章
- Vue.js实例练习
最近学习Vue.js感觉跟不上节奏了,Vue.js用起来很方便. 主要实现功能,能添加书的内容和删除.(用的Bootstrap的样式)demo链接 标题用了自定义组件,代码如下: components ...
- JS实例
JS实例 1.跑马灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...
- 【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型
前文提要:[js实例]js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法6.操作方法 ...
- [百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码
MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下 一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...
- 百度地图整合功能分享修正版[ZMap.js] 实例源码!
ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是 ...
- jquery.validate.js实例演示
validate是前端重要的交互手段,提升性能的同时更能提升用户操作体验,validate的实现大概有三种方式:HTML5部分支 持,validate验证框架,手动写js或ajax调用接口.使用val ...
随机推荐
- day7:set和深浅copy
1,判断字符串是不是空格isspace函数 s1 = ' ' s2 = ' ssss' print(s1.isspace()) print(s2.isspace()) 运行结果: True False ...
- Instruments之Leaks学习
前言: 本篇文章,在于学习,我把别人的一些感觉好的文章汇总成了一篇,亲自实现了一下,留用于今后学习资料. 文章脉络:文章脉络: 一.内存优化 简介:Objective_C 有3种内存管理方法, 它们分 ...
- 图->连通性->最小生成树(克鲁斯卡尔算法)
文字描述 上一篇博客介绍了最小生成树(普里姆算法),知道了普里姆算法求最小生成树的时间复杂度为n^2, 就是说复杂度与顶点数无关,而与弧的数量没有关系: 而用克鲁斯卡尔(Kruskal)算法求最小生成 ...
- pandas基础运算
重新索引 (1)reindex重新索引,在已有的索引基础上新建索引,fill_value可以指定新建索引默认值 (2)#新建索引,如果新建的索引值为空自动填充之前的值 对于DataFrame重新索引同 ...
- FTP主动模式和被动模式的区别（转）
dd by zhj: 一般使用被动模式,在命令行下,被动模式的格式是:ftp -p (yinservice_env) ajian@ubuntu-desk:~$ ftp -pftp> 之前在用命令 ...
- sublime 可能卡的原因
在重新安装编辑器的时候,配置javascript提示,发现这个插件安装之后,sublime变得非常卡,按照我电脑的性能,同时开着的atom敲代码都不卡.于是把这个插件卸载之后,sublime变得非常流 ...
- python获取指定目录下特定格式的文件名
之前一直用windows下的bat脚本获取一个目录下的指定格式的文件名,如下所示: dir *.jpg /b/s > train.set pause 十分简单,将这个bat文件放到你想要获取文件 ...
- es分词器
1.默认的分词器 standard standard tokenizer:以单词边界进行切分standard token filter:什么都不做lowercase token filter:将所有字 ...
- shell字符串数组
数组 声明数组 declare -a ARRAY_NAME declare -A ARRAY_NAME: 关联数组 注意:两者不可相互转换 数组名和下标(索引) 索引:编号从0开始,属于数值索引 注意 ...
- 20165236实验一 Java开发环境的熟悉
课程:Java 姓名:郭金涛 学号:20165236 实验日期:2018/04/01 指导老师:娄嘉鹏 实验名称:Java开发环境的熟悉 实验要求: 1. 建立“自 ...