<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
li{list-style:none;}
#mask{
280px;
height:50px;
margin:30px auto;
overflow: hidden;
}
#mask li{
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{
480px;
height:100px;
overflow: hidden;
margin:80px auto;
}
#box li{
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,200,height:200,marginLeft:-50,marginTop:-50},{time:500,easing:'ease-out'});
}
aChange[i].onmouseout=function(){
move(this,{opacity:0.1,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>