<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖檔切換----->>
<code>jquer和封裝的運動函數對比</code>
</title>
<style type="text/css">
#parent{
margin:500px 500px 0 500px;
position: relative;
width: 35%;
height: 500px;
}
#parent div{
position: absolute;
#parent span{
color:green;
font-size: 136px;
z-index: 99;
cursor: pointer;
</style>
<script type="text/javascript" src="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({
'opacity':arr[i].opacity
},300)
$(img1).animate({
*/
//右
span[1].onclick=function(){
arr.unshift(arr[arr.length-1]);
arr.pop();
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="images/scenery_11.jpg" />
</div>
<div style="top:28px;left:-159px;z-index:2;opacity:0.6">
<img style="width:450px;height:300px" src="images/scenery_13.jpg" />
<div style="top:-6px;left:-81px;z-index:3">
<img style="width:500px;height:350px" src="images/scenery_14.jpg" />
<div style="top:28px;left:45px;z-index:2;opacity:0.6">
<img style="width:450px;height:300px" src="images/scenery_15.jpg" />
<div style="top:53px;left:153px;z-index:1;opacity:0.4">
<img style="width:400px;height:250px" src="images/scenery_16.jpg" />
</body>
</html>
本文轉自 沉迷學習中 51CTO部落格，原文連結：http://blog.51cto.com/12907581/1934392，如需轉載請自行聯系原作者
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)