一：点击变色以后鼠标移上其他的变色
<style type="text/css">
*{
margin:0px auto;}
#kuang{
100px;
height:50px;}
.list{
100px;
height:50px;
background-color:#03C;
text-align:center;
vertical-align:middle;
line-height:50px;
color:#fff;
border:1px solid #CCC}
</style>
</head>
<body>
<div id="kuang">
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">深圳</div>
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">北京</div>
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">上海</div>
</div>-->
</body>
<script type="text/javascript">
function Xuan(a) 先做点击效果
{
var list = document.getElementsByClassName("list");
清一下(回复原样式)
for(var i=0;i<list.length;i++)
{
list[i].style.backgroundColor = "#03C";
list[i].removeAttribute("as");
}
选择变色
a.style.backgroundColor = "red";
a.setAttribute("as",1);
}
function Bian(a)
{
var list = document.getElementsByClassName("list");
清一下(回复原样式)
for(var i=0;i<list.length;i++)
{
if(list[i].getAttribute("as")!=1)
{
list[i].style.backgroundColor = "#03C";
}
}
选择变色
a.style.backgroundColor = "red";
}
function Hui()
{
var list = document.getElementsByClassName("list");
清一下(回复原样式)
for(var i=0;i<list.length;i++)
{
if(list[i].getAttribute("as")!=1)
{
list[i].style.backgroundColor = "#03C";
}
}
}
二：滚动到某个位置然后一直在顶部
<style type="text/css">
*{
margin:0px auto;}
</style>
</head>
<body>
<div id="l" style="100%; height:200px; background-color:red;"> </div>
<div id="caidan" style="100%; height:100px; background-color:blue;"></div>
<div style="100%; height:1000px; background-color:#000;"></div>
<input type="button" value="an" onclick="Hui()" />
</body>
<script type="text/javascript">
/*function Hui()
{
window.scrollTo(0,200); 这个是点击按钮回到顶部，和这个没有关系
}*/
window.onscroll = function()
{
var c = document.getElementById("caidan");
//var ch = c.style.height;
var l = document.getElementById("l");
var lh = l.style.height;
//parseInt(ch);
if(window.scrollY >= parseInt(lh)) Y轴大于等于蓝色的高超出范围
{
//超出的范围操作
c.style.position = "fixed";
c.style.top = "0px";
}
else
{
//没有超出的范围操作
c.style.position = "relative";
}
}
</script>