JS实例5
Posted navyyouth
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的主要内容，如果未能解决你的问题，请参考以下文章