效果圖
示例代碼：
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){
//每次調(diào)用的時(shí)候若皱，就需要只有一個(gè)定時(shí)器在工作呐赡，（開始運(yùn)動時(shí)候關(guān)閉所有定時(shí)器）
//并且關(guān)閉或開啟都是當(dāng)前物體的定時(shí)器胧弛，防止與頁面上其他定時(shí)器沖突离咐，使每個(gè)定時(shí)器互不干擾阶牍。
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var bStop=true; //假設(shè)所有的都已經(jīng)到達(dá)目標(biāo)了履肃。
for(var name in json){
var iTarget=json[name] //所有的目標(biāo)點(diǎn)
if(name=="opacity"){
var cur=parseInt(parseFloat(getStyle(obj,name))*100)
}else{
var cur=parseInt(getStyle(obj,name)) //cur是當(dāng)前移動的數(shù)值
}
var speed=(iTarget-cur)/10;
//物體運(yùn)動的速度，數(shù)字越小運(yùn)動的越慢扣蜻。
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";
}
//某個(gè)值不等于目標(biāo)點(diǎn)
if(cur!=iTarget){
bStop=false;
}
}
if(bStop){
clearInterval(obj.timer);
if(fnEnd){
fnEnd();
}
}
},20)
}
