jquer和封装的运动函数对比
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="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="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>
<div style="top:-6px;left:-81px;z-index:3">
<img style="width:500px;height:350px" src="images/scenery_14.jpg" />
</div>
<div style="top:28px;left:45px;z-index:2;opacity:0.6">
<img style="width:450px;height:300px" src="images/scenery_15.jpg" />
</div>
<div style="top:53px;left:153px;z-index:1;opacity:0.4">
<img style="width:400px;height:250px" src="images/scenery_16.jpg" />
</div>
</div>
</body>
</html>
本文出自 “12897581” 博客，请务必保留此出处http://12907581.blog.51cto.com/12897581/1934392
以上是关于jquer和封装的运动函数对比的主要内容，如果未能解决你的问题，请参考以下文章