JS实例5

2021-05-18 04:27

阅读:673

id="Label3" contentscore="1561">

标签:lin   point   pointer   cli   意思   存在   根据   padding   color   

技术分享

做这么一个效果  鼠标单击某个名字后变色,没选中的鼠标移动上去变色

首先布局这个效果,然后给每个表格添加单击事件onclick、鼠标放上事件onmousemove、鼠标移出事件onmouseout

容易把这几个事件弄混

无标题文档
张海军
张琦伟
张胜国
继文楷
张三
李四
王五
猎人但
狗剩
王八蛋
狗屎
滚蛋
哈喽
凯奇
张海军
张琦伟
张胜国
继文楷
张三
李四
王五
猎人但
狗剩
王八蛋
狗屎
滚蛋
哈喽
凯奇

 因为是class名 所有onclick="Dian(this)" onmousemove="Fang(this)"都有个this,意思是点击自身,因为class名都一样,加上this知道单击的是哪个

先单击事件的函数

    

 单击变红,然后没有单击的循环变成原来的颜色

下一步写鼠标放上变色

                function Fang(b)
		{
			var xiao=document.getElementsByClassName("xiao")
			for(var i=0; i

 这样看着是没问题,实际效果上是只有鼠标放上变色效果,鼠标单击效果没有了。这是因为优先级的关系

所以要加虚拟属性,鼠标单击后添加属性,没有单击的移出这个属性

                function Dian(a)
		{
			var xiao=document.getElementsByClassName("xiao")
			for(var i=0; i如果没有这个条件单击事件就不存在
				{
					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

 具体效果如同电脑QQ好友里选中某个好友之后,其余好友鼠标移动还有颜色变化

 

JS实例5

标签:lin   point   pointer   cli   意思   存在   根据   padding   color   

原文地址:http://www.cnblogs.com/navyouth/p/7740135.html


评论


亲,登录后才可以留言!