4.9 am例题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <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>
        
       <!--    <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 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";        
                }
                
            }    
        }
        
        /*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))
            {
                //超出的范围操作    
                c.style.position = "fixed";
                c.style.top = "0px";
            }
            else
            {
                //没有超出的范围操作
                c.style.position = "relative";
            }*/
        }
    </script>
</html>

这是这个例题的最终效果，鼠标移上可以变色，移开在变回来，点击可以选中而且变色。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<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>

	<!-- <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 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";
	}

	}
	}

	/*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))
	{
	//超出的范围操作
	c.style.position = "fixed";
	c.style.top = "0px";
	}
	else
	{
	//没有超出的范围操作
	c.style.position = "relative";
	}*/
	}
	</script>
	</html>

posted @ 2018-04-15 08:56 峰栯阅读(81) 评论(0) 编辑收藏举报

峰栯

4.9 am例题

公告