首页 > 代码库 > jquer和封装的运动函数对比

jquer和封装的运动函数对比

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>图片切换----->>

jquer和封装的运动函数对比

</title>

<style type="text/css">

#parent{

margin:500px 500px 0 500px;

position: relative;

width: 35%;

height: 500px;

}

#parent div{

position: absolute;

}

#parent span{

position: absolute;

color:green;

font-size: 136px;

z-index: 99;

cursor: pointer;

}

</style>

<script type="text/javascript" src="http://www.mamicode.com/jquery.js"></script>

<script type="text/javascript">

window.onload=function(){

var parent = document.getElementById("parent");

var span =parent.getElementsByTagName("span");


var son_div = parent.getElementsByTagName("div");

var arr   =[];

for(var i=0;i<son_div.length;i++){

var img = son_div[i].getElementsByTagName("img")[0];

arr.push({

‘top‘     : getStyle(son_div[i],‘top‘),

‘left‘    : getStyle(son_div[i],‘left‘),

‘zIndex‘  : getStyle(son_div[i],‘zIndex‘),

‘opacity‘ : getStyle(son_div[i],‘opacity‘),

‘width‘   : getStyle(img,‘width‘),

‘height‘  : getStyle(img,‘height‘)

  });

}

console.log(arr);

//左

span[0].onclick=function(){

arr.push(arr[0]);

arr.shift();

for(var i=0;i<arr.length;i++){

var img1 = son_div[i].getElementsByTagName("img")[0];

son_div[i].style.zIndex=arr[i].zIndex;


startMove(son_div[i],{

‘top‘:arr[i].top,

‘left‘:arr[i].left,

‘opacity‘: arr[i].opacity*100

});

startMove(img1,{

‘width‘: arr[i].width,

‘height‘:arr[i].height,

});

/*

$(son_div[i]).animate({

‘top‘:arr[i].top,

‘left‘:arr[i].left,

‘opacity‘:arr[i].opacity

},300)

$(img1).animate({

‘width‘: arr[i].width,

‘height‘:arr[i].height,

},300)

*/

}

}

//右

span[1].onclick=function(){

arr.unshift(arr[arr.length-1]);

arr.pop();

for(var i=0;i<arr.length;i++){

var img1 = son_div[i].getElementsByTagName("img")[0];

son_div[i].style.zIndex=arr[i].zIndex;

$(son_div[i]).animate({

‘top‘:arr[i].top,

‘left‘:arr[i].left,

‘opacity‘:arr[i].opacity

},300)

$(img1).animate({

‘width‘: arr[i].width,

‘height‘:arr[i].height,

},300)

}


}

}

function startMove(obj,json,endfn){

clearInterval(obj.setTime);

var iCur =0;

obj.setTime=setInterval(function(){

var kaiguan = true;

var dir;

  for(var attr in json){

if(attr==‘opacity‘){

iCur =Math.round(getStyle(obj,‘opacity‘)*100);

}else{

iCur =parseInt(getStyle(obj,attr));

}

dir = (parseInt(json[attr])-iCur)/8;

dir = dir>0?Math.ceil(dir):Math.floor(dir);

if(iCur!=parseInt(json[attr])){

kaiguan=false;

if(attr==‘opacity‘){

obj.style.opacity=(iCur+dir)/100;

obj.style.filter=‘alpha(opacity=‘+(iCur+dir)+‘)‘;

}else{

obj.style[attr]=iCur+dir+‘px‘;

}

}

}

if(kaiguan){

clearInterval(obj.setTime);

//回调函数

endfn&&endfn.call(obj);

}

},30);

}


//获取样式的值

function getStyle ( obj, attr ){ 

return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];

}

</script>

</head>

<body>


<div id="parent">

<span style="top:47px;left:-295px"><</span>

<span style="top:59px;right:22px">></span>

<div style="top:53px;left:-212px;z-index:1;opacity:0.4">

<img style="width:400px;height:250px" src="http://www.mamicode.com/images/scenery_11.jpg" />

</div>

<div style="top:28px;left:-159px;z-index:2;opacity:0.6">

<img style="width:450px;height:300px"  src="http://www.mamicode.com/images/scenery_13.jpg" />

</div>

<div style="top:-6px;left:-81px;z-index:3">

<img style="width:500px;height:350px"  src="http://www.mamicode.com/images/scenery_14.jpg" />

</div>

<div style="top:28px;left:45px;z-index:2;opacity:0.6">

<img style="width:450px;height:300px" src="http://www.mamicode.com/images/scenery_15.jpg" />

</div>

<div style="top:53px;left:153px;z-index:1;opacity:0.4">

<img style="width:400px;height:250px" src="http://www.mamicode.com/images/scenery_16.jpg" />

</div>

</div>

</body>

</html>


本文出自 “12897581” 博客,请务必保留此出处http://12907581.blog.51cto.com/12897581/1934392

jquer和封装的运动函数对比