变色变透明度 

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
             *{
                  margin:0px;
                  padding:0px;
              }
            li{list-style:none;}
            #mask{
                width:280px;
                height:50px;
                margin:30px auto;
                overflow: hidden;
            }
            #mask li{
                width:50px;
                height:50px;
                border-radius:50%;
                float:left;
                margin-right:20px;
            }
            #mask .list1{background: red;}
            #mask .list2{background: purple;}
            #mask .list3{background: green;}
            #mask .list4{background: blue;}
            #box{
                width:480px;
                height:100px;
                overflow: hidden;
                margin:80px auto;
            }
            #box li{
                width:100px;
                height:100px;
                border-radius:50%;
                float:left;
                margin-right:20px;
                background: red;
                opacity:0.1;
            }
        </style>
        <script src="move.js"></script>
        <script>
        function getStyle(obj,name){   //获取非行间样式
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{return getComputedStyle(obj,false)[name];}
        }
            window.onload=function(){
                var oMask=document.getElementById("mask");//上面的，用于变色
                var aLi=oMask.getElementsByTagName('li');
                var oBox=document.getElementById("box"); //下面的，用于改变透明度
                var aChange=oBox.getElementsByTagName('li');
                var arr=[];
                for(var i=0;i<aChange.length;i++){  //存放left,top
                    arr[i]={left:aChange[i].offsetLeft,top:aChange[i].offsetTop}
                }
                for(var i=0;i<aChange.length;i++){  //float--position
                    aChange[i].style.position='absolute';
                    aChange[i].style.left=arr[i].left+'px';
                    aChange[i].style.top=arr[i].top+'px';
                    aChange[i].style.top=arr[i].top+'px';
                    aChange[i].style.margin=0;
                }
                for(var i=0;i<aChange.length;i++){
                    aChange[i].onmouseover=function(){
                        move(this,{opacity:1,width:200,height:200,marginLeft:-50,marginTop:-50},{time:500,easing:'ease-out'});
                    }
                    aChange[i].onmouseout=function(){
                        move(this,{opacity:0.1,width:100,height:100,marginLeft:0,marginTop:0},{time:500,easing:'ease-out'});
                    }
                }
                for(var i=0;i<aLi.length;i++){
                    aLi[i].onclick=function(){
                        for(var i=0;i<aChange.length;i++){
                            aChange[i].style.background=getStyle(this,'background');
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <ol id="mask">
            <li class="list1"></li>
            <li class="list2"></li>
            <li class="list3"></li>
            <li class="list4"></li>
        </ol>
        <ul id="box">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

 

posted @ 2016-07-24 20:42  河南小样  阅读(158)  评论(0)    收藏  举报