效果图
示例代码：
html文件：
<div id="box">
<a href="javascript:;">
)
</a>
<a href="javascript:;">
)
</a>
<a href="javascript:;">
)
</a>
<a href="javascript:;">
)
</a>
<a href="javascript:;">
)
</a>
<a href="javascript:;">
)
</a>
<a href="javascript:;">
)
</a>
</div>
css代码：
*{
margin:0;
padding:0;
}
#box{
width:800px;
height:400px;
margin:50px auto;
position: relative;
}
#box img{
position: absolute;
}
#box .aa{
width:320px;
height:160px;
top:-160px;
left:0;
z-index:1;
opacity: 0;
}
#box .aa1{
width:320px;
height:160px;
top:120px;
left:0;
z-index:1;
opacity: 0.2;
}
#box .aa2{
width:360px;
height:180px;
top:110px;
left:100px;
z-index:2;
opacity:0.6;
}
#box .aa3{
width:400px;
height:200px;
top:100px;
z-index:3;
left:200px;
opacity: 1;
}
#box .aa4{
width:360px;
height:180px;
top:110px;
left:340px;
z-index:2;
opacity:0.6;
}
#box .aa5{
width:320px;
height:160px;
top:120px;
left:480px;
z-index:1;
opacity: 0.2;
}
#box .aa6{
width:320px;
height:160px;
top:-160px;
left:480px;
z-index:1;
opacity: 0;
}
js代码：
var aImg=document.getElementsByTagName("img");
var arr=["zIndex","width","height","opacity","left","top"];
var arrVal=[];
for(var i=0;i<aImg.length;i++){
var oarr={};
for(var j=0;j<arr.length;j++){
if(arr[j]=="opacity"){
var icur=Math.round(getStyle(aImg[i],'opacity')*100)
}else{
var icur=parseInt(getStyle(aImg[i],arr[j]))
}
oarr[arr[j]]=icur;
}
arrVal.push(oarr)
}
setInterval(function(){
arrVal.push(arrVal.shift());
// console.log(arrVal[0]);
for(var i=0;i<aImg.length;i++){
startMove(aImg[i], arrVal[i])
}
},3000)
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]
}else{
return getComputedStyle(obj)[attr]
}
}
function startMove(obj,json,fnEnd){
//每次调用的时候，就需要只有一个定时器在工作，（开始运动时候关闭所有定时器）
//并且关闭或开启都是当前物体的定时器，防止与页面上其他定时器冲突，使每个定时器互不干扰。
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var bStop=true; //假设所有的都已经到达目标了。
for(var name in json){
var iTarget=json[name] //所有的目标点
if(name=="opacity"){
var cur=parseInt(parseFloat(getStyle(obj,name))*100)
}else{
var cur=parseInt(getStyle(obj,name)) //cur是当前移动的数值
}
var speed=(iTarget-cur)/10;
//物体运动的速度，数字越小运动的越慢。
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(name=="opacity"){
obj.style.opacity=(cur+speed)/100
}else if(name=='zIndex'){
obj.style[name]=cur+speed
}else{
obj.style[name]=cur+speed+"px";
}
//某个值不等于目标点
if(cur!=iTarget){
bStop=false;
}
}
if(bStop){
clearInterval(obj.timer);
if(fnEnd){
fnEnd();
}
}
},20)
}
