為什么實(shí)現(xiàn)不了同時(shí)運(yùn)動(dòng)
<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>test</title>
?? ?<style>
?? ?*{
?? ??? ?margin:0;
?? ??? ?padding:0;
?? ?}
?? ?#ul1 li{
?? ??? ?width:150px;
?? ??? ?height:100px;
?? ??? ?margin-top: 20px;
?? ??? ?background: red;
?? ??? ?border:1px solid green;
?? ??? ?opacity: 0.8;
?? ??? ?filter:alpha(opacity=80);
?? ??? ?/*加上邊框后，會(huì)導(dǎo)致offsetwidth變寬*/
?? ??? ?/*position:relative;*/
?? ??? ?
?? ?}
?? ?</style>
</head>
<body>
?? ?<ul id="ul1">
?? ??? ?<li></li>
?? ??? ?<li></li>
?? ??? ?<li></li>
?? ?</ul>
?? ?<script>
?? ??? ?var ul1=document.getElementById("ul1");
?? ??? ?var lis=ul1.getElementsByTagName("li");
?? ??? ?//獲取非行間樣式
?? ??? ?function getStyle(obj,name){
?? ??? ??? ?if(obj.currentStyle){
?? ??? ??? ??? ?return obj.currentStyle[name];
?? ??? ??? ?}else{
?? ??? ??? ??? ?return getComputedStyle(obj,false)[name];
?? ??? ??? ?}
?? ??? ?}
//?? ??? ?for(var i=0;i<lis.length;i++){
?? ??? ??? ?//數(shù)組是對(duì)象，給對(duì)象設(shè)置一份屬性值；設(shè)置不同的數(shù)組的定時(shí)器，使多物體運(yùn)動(dòng)時(shí)相互不受影響
//?? ??? ??? ?lis[i].n=null;
???????? //鏈?zhǔn)竭\(yùn)動(dòng)
//?? ??? ??? ?lis[0].onmouseover=function(){
//?? ??? ??? ??? ?move(this,'opacity',30);
////?? ??? ??? ??? ?alert(1)
//?? ??? ??? ?}
//?? ??? ??? ?
//?? ??? ??? ?lis[0].onmouseout=function(){
//?? ??? ??? ??? ?move(this,'opacity',80);
//?? ??? ??? ?}
//?? ??? ?}
??????? //鏈?zhǔn)竭\(yùn)動(dòng)
//????? lis[1].onmouseover=function(){
//?? ??? ??? ??? ?move( lis[1],'height',260,function(){
//?? ??? ??? ??? ??? ?move(lis[1],'width',300,function(){
//?? ??? ??? ??? ??? ??? ?move(lis[1],'opacity',30)
//?? ??? ??? ??? ??? ?})
//?? ??? ??? ??? ?});
////?? ??? ??? ??? ?alert(1)
//?? ??? ??? ?}
//?? ??? ??? ?
//?? ??? ?lis[1].onmouseout=function(){
//?? ??? ??? ??? ?move(lis[1],'width',150,function(){
//?? ??? ??? ??? ??? ?move(lis[1],'height',100)
//?? ??? ??? ??? ?});
//?? ??? ??? ?}
?? //同時(shí)運(yùn)動(dòng)
????? lis[0].onmouseover=function(){
???? ??? ?move(lis[0],{'opacity':20,'width':300})
????? }
???? ?
?? ??? ?function move(obj, json,fn){
?? ??? ??? ?//清除與調(diào)用計(jì)時(shí)器
?? ??? ??? ?//attr是json內(nèi)的name
?? ??? ??? ?var flag=true;
?? ??? ??? ?for(var attr in json){
?? ??? ??? ?clearInterval(obj.n);
?? ??? ??? ?obj.n=setInterval(function(){
????????? //?? ?console.log(obj.offsetWidth)
?? ??? ? //當(dāng)有邊框時(shí)不能用offsetWidth,而要用clientwidth或者
???????? //是通過(guò)獲取非行間樣式的方法或的width(getStyles)
?????????????? var cur=0;
?????????????? //判斷是哪種類型
?????????????? if(attr=="opacity"){
?????????????? cur=parseFloat(getStyle(obj,attr))*100;
?????????????? }else{
????????????? ??? ?cur=parseInt(getStyle(obj,attr))
?????????????? }
?????????????? //計(jì)算速度
?? ??? ??? ??? ?var speed=(json[attr]-cur)/10;
?? ??? ??? ??? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ??? ??? ?//給對(duì)象賦值
?? ??? ??? ??? ?if(cur!=json[attr]){
?? ??? ??? ??? ??? ?flag=false;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(attr=="opacity"){
?? ??? ??? ??? ?obj.style.opacity=(cur+speed)/100;
?? ??? ??? ??? ?obj.style.filter="alpha(opacity:"+cur+speed+")"?? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?else{
?? ??? ??? ??? ??? ??? ?obj.style[attr]=cur+speed+"px";
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(flag){
?? ??? ??? ??? ??? ?clearInterval(obj.n)
?? ??? ??? ??? ??? ?if(fn){
?? ??? ??? ??? ??? ??? ?fn();
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?},17)
?? ??? ??? ?}
?? ??? ??? ?}
?? ?</script>
</body>
</html>
2016-05-31
var flag=true;? 及for(var attr in json) 應(yīng)該放在定時(shí)器n內(nèi), json的for循環(huán)之前
if(flag){清除定時(shí)器和fn回調(diào)}應(yīng)該放在定時(shí)器n內(nèi), json的for循環(huán)之后
具體解釋可以參考<JS動(dòng)畫(huà)效果課程?6-2小節(jié)>的評(píng)論區(qū)討論,希望能幫到你
更改后的參考code如下(未貼上來(lái)的其他code不變):
????????function?move(obj,?json,fn){ ????????????//清除與調(diào)用計(jì)時(shí)器 ????????????//attr是json內(nèi)的name ????????????clearInterval(obj.n); ????????????obj.n=setInterval(function(){ ????????????//?console.log(obj.offsetWidth) ????????????//?當(dāng)有邊框時(shí)不能用offsetWidth,而要用clientwidth或者 ????????????//?是通過(guò)獲取非行間樣式的方法或的width(getStyles) ?????????????var?flag?=?true; ?????????????for?(var?attr?in?json)?{ ?????????????????var?cur?=?0; ?????????????????//判斷是哪種類型 ?????????????????if?(attr?==?"opacity")?{ ?????????????????????cur?=?parseFloat(getStyle(obj,?attr))?*?100; ?????????????????}?else?{ ?????????????????????cur?=?parseInt(getStyle(obj,?attr)); ?????????????????} ?????????????????//計(jì)算速度 ?????????????????var?speed?=?(json[attr]?-?cur)?/?10; ?????????????????speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed); ?????????????????//給對(duì)象賦值 ?????????????????if?(cur?!=?json[attr])?{ ?????????????????????flag?=?false; ?????????????????} ?????????????????if?(attr?==?"opacity")?{ ?????????????????????obj.style.opacity?=?(cur?+?speed)?/?100; ?????????????????????obj.style.filter?=?"alpha(opacity:"?+?cur?+?speed?+?")"; ?????????????????}?else?{ ?????????????????????obj.style[attr]?=?cur?+?speed?+?"px"; ?????????????????} ?????????????} ????????????if?(flag)?{ ????????????????clearInterval(obj.n); ????????????????if?(fn)?{ ????????????????????fn(); ????????????????} ????????????} ????????????},17); ????????}