js鼠标点击移动效果 

<!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>
<style type="text/css">
*{margin:0px auto; padding:0px;}
#wai{width:600px; height:700px; }
.liebiao{width:600px; height:100px; text-align:center; vertical-align:bottom; background-color:#03F; line-height:100px;margin-top:5px; font-size:24px; cursor:pointer;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div id="wai">
<div class="liebiao" bb="0">一二三</div>
<div class="liebiao" bb="0">四五</div>
<div class="liebiao" bb="0">上山打</div>
<div class="liebiao" bb="0">松鼠打</div>
<div class="liebiao" bb="0">不过</div>
<div class="liebiao" bb="0">仓鼠</div>
</div>
</body>
<script type="text/javascript">
var aa = document.getElementsByClassName("liebiao");
for(var i=0;i<aa.length;i++){
    aa[i].onclick=function(){
        for(var i=0;i<aa.length;i++){
    aa[i].style.backgroundColor = "#03F";
    aa[i].getAttribute("bb",'0');
            }
        this.style.backgroundColor = "red";
        this.getAttribute("bb",'1');
        }
    }
    for(var i=0;i<aa.length;i++){
        aa[i].onmouseover = function(){
            this.style.backgroundColor = "#03F";}
    }
        for(var i=0;i<aa.length;i++){
            aa[i].onmouseout = function(){
            var bb = parsrInt(this.getAttribute("bb"));}
            if(bb==0){
            this.backgroundColor = "#03F";    
                }
        else if(bb==1){
            this.backgroundColor = "red";
            }        
            }
        
</script>
</html>
<!--<script type="text/javascript">
        var lizij = document.getElementsByClassName("lizi");
        for(var i=0;i<lizij.length;i++){
            lizij[i].onclick = function(){
            for(var i=0;i<lizij.length;i++){
            lizij[i].style.backgroundColor ="white";
            }
        this.style.backgroundColor = "red";
        var id = this.getAttribute("guanlian");
        var nr = document.getElementsByClassName("neirong");
        for(var i=0;i<nr.length;i++){
            nr[i].style.display = "none";
            }
        
            document.getElementById(id).style.display = "block";
        
                }
            }
    </script>-->

 

posted @ 2018-04-20 15:19  palpitate  阅读(400)  评论(0)    收藏  举报