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 ...

随机推荐

内联扩展 inline expansion
让编译器直接将完整的函数体插入到每一个调用该函数的地方,从而提高函数调用的运行速度. 优秀的JIT编译器会通过侦测运行信息,仅将需要频繁运行的瓶颈部分进行编译,从而大大削减编译所需的时间. 而且,利用 ...
PHP之数组函数
php数组中的预定义变量预定义常量 CASE_LOWER (integer) CASE_LOWER 用在array_change_key_case()中将数组的键名转换为小写字母.这也是array_ ...
2017年蓝桥杯省赛A组c++第7题(正则问题)
/* 描述:正则问题考虑一种简单的正则表达式: 只由 x ( ) | 组成的正则表达式. 小明想求出这个正则表达式能接受的最长字符串的长度. 例如 ((xx|xxx)x|(x|xx))xx 能接受的 ...
post/get in console of JSarray/js 数组详细操作方法及解析合集
https://juejin.im/post/5b0903b26fb9a07a9d70c7e0[ js 数组详细操作方法及解析合集 js array and for each https://blog ...
[administrative][archlinux][clonezilla][disk cloning] 一块 windows 10 硬盘的备份
https://wiki.archlinux.org/index.php/disk_cloning https://wiki.archlinux.org/index.php/full_system_b ...
dp 单调性优化总结
对于单调性优化其实更多的是观察dp的状态转移式子的单调性进而用优先队列单调队列二分查找什么的找到最优决策使时间更优. 对于这道题就是单调性优化的很好的例子首先打一个暴力再说. f[i][j] ...
ORACLE监听配置及测试实验
实验一: 修改db_domain和service_name 我们将Db_name和Db_domain两个参数用'.'连接起来,表示一个数据库,并将该数据库的名称称为Global_name即等于serv ...
RHEL5.5的安装文档
---恢复内容开始--- 1.1 安装操作系统 (1) 按“ENTER”键,进入图形模式安装: (2) 检测CD,点击“Skip”跳过: (3) 安装界面显示,点击“Next”: (4) 选择语言为“ ...
LEO原创-FMX之你不知道的ARC
LEO原创13498714 FMX加入了ARC技术,对象创建后不用释放,FMX会帮你释放,是不是这样就不用关心对象的释放了呢,非也! 写简单的代码,这个功能也许很好用,但如果你写的是一个项目,那隐藏的 ...
IGMP协议
IGMP报文格式: 4bit的IGMP版本(1)+4bit的IGMP类型(1-2)+8bit未用+16bit检验和(同ICMP)+32bit组地址(D类IP地址) 类型为1说明是由多播路由器发出的查询 ...

JS实例5

JS实例5的更多相关文章

随机推荐

热门专题