4.9号 点击变色以后鼠标移上其他变色和滚动到某个位置然后一直在顶部

一：点击变色以后鼠标移上其他的变色

 <style type="text/css">
			*{
				margin:0px auto;}
			#kuang{
				width:100px;
				height:50px;}
			.list{
				width: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="width:100%; height:200px; background-color:red;">              </div>
        <div id="caidan" style="width:100%; height:100px; background-color:blue;"></div>
        <div style="width: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>

　　

　

posted on 2018-04-09 16:53  sunyexiang  阅读(196)  评论(0)  编辑  收藏  举报

导航