<!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="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 ><</span>
<span >></span>
<div >
<img src="p_w_picpaths/scenery_11.jpg" />
</div>
<div >
<img src="p_w_picpaths/scenery_13.jpg" />
</div>
<div >
<img src="p_w_picpaths/scenery_14.jpg" />
</div>
<div >
<img src="p_w_picpaths/scenery_15.jpg" />
</div>
<div >
<img src="p_w_picpaths/scenery_16.jpg" />
</div>
</div>
</body>
</html>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
