為什么實現不了同時運動
<!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);
?? ??? ?/*加上邊框后，會導致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++){
?? ??? ??? ?//數組是對象，給對象設置一份屬性值；設置不同的數組的定時器，使多物體運動時相互不受影響
//?? ??? ??? ?lis[i].n=null;
???????? //鏈式運動
//?? ??? ??? ?lis[0].onmouseover=function(){
//?? ??? ??? ??? ?move(this,'opacity',30);
////?? ??? ??? ??? ?alert(1)
//?? ??? ??? ?}
//?? ??? ??? ?
//?? ??? ??? ?lis[0].onmouseout=function(){
//?? ??? ??? ??? ?move(this,'opacity',80);
//?? ??? ??? ?}
//?? ??? ?}
??????? //鏈式運動
//????? 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)
//?? ??? ??? ??? ?});
//?? ??? ??? ?}
?? //同時運動
????? lis[0].onmouseover=function(){
???? ??? ?move(lis[0],{'opacity':20,'width':300})
????? }
???? ?
?? ??? ?function move(obj, json,fn){
?? ??? ??? ?//清除與調用計時器
?? ??? ??? ?//attr是json內的name
?? ??? ??? ?var flag=true;
?? ??? ??? ?for(var attr in json){
?? ??? ??? ?clearInterval(obj.n);
?? ??? ??? ?obj.n=setInterval(function(){
????????? //?? ?console.log(obj.offsetWidth)
?? ??? ? //當有邊框時不能用offsetWidth,而要用clientwidth或者
???????? //是通過獲取非行間樣式的方法或的width(getStyles)
?????????????? var cur=0;
?????????????? //判斷是哪種類型
?????????????? if(attr=="opacity"){
?????????????? cur=parseFloat(getStyle(obj,attr))*100;
?????????????? }else{
????????????? ??? ?cur=parseInt(getStyle(obj,attr))
?????????????? }
?????????????? //計算速度
?? ??? ??? ??? ?var speed=(json[attr]-cur)/10;
?? ??? ??? ??? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ??? ??? ?//給對象賦值
?? ??? ??? ??? ?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) 應該放在定時器n內, json的for循環之前
if(flag){清除定時器和fn回調}應該放在定時器n內, json的for循環之后
具體解釋可以參考<JS動畫效果課程?6-2小節>的評論區討論,希望能幫到你
更改后的參考code如下(未貼上來的其他code不變):
????????function?move(obj,?json,fn){ ????????????//清除與調用計時器 ????????????//attr是json內的name ????????????clearInterval(obj.n); ????????????obj.n=setInterval(function(){ ????????????//?console.log(obj.offsetWidth) ????????????//?當有邊框時不能用offsetWidth,而要用clientwidth或者 ????????????//?是通過獲取非行間樣式的方法或的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)); ?????????????????} ?????????????????//計算速度 ?????????????????var?speed?=?(json[attr]?-?cur)?/?10; ?????????????????speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed); ?????????????????//給對象賦值 ?????????????????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); ????????}