                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

為什么我無法顯示鏈式動畫？

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style?type="text/css">
???*{
????margin:?0px;
????padding:?0px;
???}
ul,li{
????????????list-style:?none;
}
ul?li{
????????????width:?100px;
????????????height:?100px;
????????????background:?#808002;
????????????margin-bottom:?10px;
????????????border:?4px?solid?#ccc;
????????????filter:?alpha(opacity:50);//IE兼容
?????????opacity:?0.5;//Chrome兼容
?????????cursor:?pointer;
}??????
</style>
<script?type="text/javascript">
window.onload=function(){
//載入滑動動效
????????????var?ddjli=document.getElementsByTagName("li");???????????
????????????for(var?i=0;i<ddjli.length;i++){
?????????????ddjli[i].timer=null;//時間片私有化
?????????????ddjli[i].onmouseover=function(){
?????????????demo(this,"width",400,function(){
?????????????demo(this,"height",400);
?????????????});
????????????//demo(this,"height",400);
????????????//demo(this,"opacity",80);?????????????
???????????};
???????ddjli[i].onmouseout=function(){
????????demo(this,"width",100,function(){
????????demo(this,"height",100);
????????});
???????????????//demo(this,"height",100);
???????????????//demo(this,"opacity",50);
???????????};?
????????????}?????????????
}
//集成封裝-緩沖拉長/透明度變幻/長寬動效
function?demo(obj,attr,itarget,fn){
//先清除定時器，防止迭代
clearInterval(obj.timer);
obj.timer=setInterval(function(){
???//樣式獲取obj的attr屬性
???var?icur=0;
???if(attr=="opacity"){
????????????????????icur=Math.round(parseFloat(getStyle(obj,attr))*100);
???}else{
???icur=parseInt(getStyle(obj,attr));?????
???}
???//變加速,距離差越近速度越小，緩沖效果?
var?speed=(itarget-icur)/10;
//速度取整
if(speed>0){
speed=Math.ceil(speed);
}else{
speed=Math.floor(speed);
}
if(icur==itarget){
????????????????????clearInterval(obj.timer);??????????????????????????????????????
}else{
if(attr=="opacity"){
????????????????????????obj.style.filter="alpha(opacity:"+icur+speed+")";
????????????????????????obj.style.opacity=(icur+speed)/100;
}else{
???????obj.style[attr]=icur+speed+"px";
}
}
if(fn){
???????????????fn();
????????????????}
},30);
}
//樣式BUG處理，解決offsetWidth漏洞問題
function?getStyle(obj,attr){
if(obj.currentStyle){
return?obj.currentStyle[attr];
}else{
????????????????return?getComputedStyle(obj,false)[attr];
}
}
</script>
</head>
<body>
????<ul>
?????<li>選項一</li>
?????<li>選項二</li>
?????<li>選項三</li>
????</ul>
</body>
</html>

00:16

Dengju

2016-11-16

源自：JS動畫效果 7-1

關注問題我要回答

1044

操作

收起

5 回答

慕粉3116392 回答被采納 +3 積分
2016-11-16

第77行的fn位置放錯了。當第一個任務完成后才會執(zhí)行fu方法。把if(fn){}?fn();?}放在69行

0 回復有任何疑惑可以回復我~

收起回答

#1

Dengju 提問者

謝謝你噢，加個好友，一起努力！

2016-11-16 回復有任何疑惑可以回復我~

#2

Dengju 提問者

還是不行，無法實現鏈式動畫

2016-11-16 回復有任何疑惑可以回復我~

慕粉3116392
2016-11-21

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

? ?*{

? ? margin: 0px;

? ? padding: 0px;

? ?}

ul,li{

? ? ? ? ? ? list-style: none;

}

ul li{

? ? ? ? ? ? width: 100px;

? ? ? ? ? ? height: 100px;

? ? ? ? ? ? background: #808002;

? ? ? ? ? ? margin-bottom: 10px;

? ? ? ? ? ? border: 4px solid #ccc;

? ? ? ? ? ? filter: alpha(opacity:50);//IE兼容

? ? ? ? ?opacity: 0.5;//Chrome兼容

? ? ? ? ?cursor: pointer;

} ? ? ?

</style>

window.onload=function(){

//載入滑動動效

? ? ? ? ? ? var ddjli=document.getElementsByTagName("li"); ? ? ? ? ??

? ? ? ? ? ? for(var i=0;i<ddjli.length;i++){

? ? ? ? ? ? ?ddjli[i].timer=null;//時間片私有化

? ? ? ? ? ? ?ddjli[i].onmouseover=function(){

? ? ? ? ? ? ?var g=this;

? ? ? ? ? ? ?demo(this,{width:400,opacity:80},function(){

? ? ? ? ? ? ?demo(g,{height:400});

? ? ? ? ? ? ?});

? ? ? ? ? ? //demo(this,"height",400);

? ? ? ? ? ? //demo(this,"opacity",80); ? ? ? ? ? ??

? ? ? ? ? ?};

? ? ? ?ddjli[i].onmouseout=function(){

? ? ? ? var g=this;

? ? ? ? demo(this,{width:100,opacity:50},function(){

? ? ? ? demo(g,{height:100});

? ? ? ? });

? ? ? ? ? ? ? ?//demo(this,"height",100);

? ? ? ? ? ? ? ?//demo(this,"opacity",50);

? ? ? ? ? ?};?

? ? ? ? ? ? } ? ? ? ? ? ??

}

//集成封裝-緩沖拉長/透明度變幻/長寬動效

function demo(obj,json,fn){

//flag用于判斷是否所有json都執(zhí)行完畢

//先清除定時器，防止迭代

clearInterval(obj.timer);

obj.timer=setInterval(function(){

for(var attr in json){

? ?//樣式獲取obj的attr屬性

? ?var icur=0;

? ?var flag=true;

? ?if(attr=="opacity"){

? ? ? ? ? ? ? ? ? ?icur=Math.round(parseFloat(getStyle(obj,attr))*100);

? ?}else{

? ?icur=parseInt(getStyle(obj,attr)); ? ??

? ?}

? ?//變加速,距離差越近速度越小，緩沖效果?

var speed=(json[attr]-icur)/10;

//速度取整

if(speed>0){

speed=Math.ceil(speed);

}else{

speed=Math.floor(speed);

}

//檢測停止

if(icur!=json[attr]){

flag=false; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

if(attr=="opacity"){

? ? ? ? ? ? ? ? ? ? ? ?obj.style.filter="alpha(opacity:"+icur+speed+")";

? ? ? ? ? ? ? ? ? ? ? ?obj.style.opacity=(icur+speed)/100;

}else{

? ? ? ?obj.style[attr]=icur+speed+"px";

}

? ? ? ? ? ? ? ? ? ? if(flag){

? ? ? ? ? ? ? ? ? ? ?clearInterval(obj.timer);?

? ? ? ? ? ? ? ? ? ? ?//鏈式回調

if(fn){

? ? ? ? ? ? ? ? ? ?fn();

? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

},30);

}

//樣式BUG處理，解決offsetWidth漏洞問題

function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr];

}else{

? ? ? ? ? ? ? ? return getComputedStyle(obj,false)[attr];

}

</script>

</head>

<body>

? ? <ul>

? ? ?<li>選項一</li>

? ? ?<li>選項二</li>

? ? ?<li>選項三</li>

? ? </ul>

</body>

</html>

0 回復有任何疑惑可以回復我~

收起回答

#1

Dengju 提問者

嗯，懂了

2016-11-22 回復有任何疑惑可以回復我~

慕粉3116392
2016-11-21

道理很簡單。你把var?flag=true;放在定時器外面flag就一直等于flase;

吧var flag=true放在定時器你就行了

0 回復有任何疑惑可以回復我~

收起回答

Dengju 提問者
2016-11-21

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style?type="text/css">
???*{
????margin:?0px;
????padding:?0px;
???}
ul,li{
????????????list-style:?none;
}
ul?li{
????????????width:?100px;
????????????height:?100px;
????????????background:?#808002;
????????????margin-bottom:?10px;
????????????border:?4px?solid?#ccc;
????????????filter:?alpha(opacity:50);//IE兼容
?????????opacity:?0.5;//Chrome兼容
?????????cursor:?pointer;
}??????
</style>
<script?type="text/javascript">
window.onload=function(){
//載入滑動動效
????????????var?ddjli=document.getElementsByTagName("li");???????????
????????????for(var?i=0;i<ddjli.length;i++){
?????????????ddjli[i].timer=null;//時間片私有化
?????????????ddjli[i].onmouseover=function(){
?????????????var?g=this;
?????????????demo(this,{width:400,opacity:80},function(){
?????????????demo(g,{height:400});
?????????????});
????????????//demo(this,"height",400);
????????????//demo(this,"opacity",80);?????????????
???????????};
???????ddjli[i].onmouseout=function(){
????????var?g=this;
????????demo(this,{width:100,opacity:50},function(){
????????demo(g,{height:100});
????????});
???????????????//demo(this,"height",100);
???????????????//demo(this,"opacity",50);
???????????};?
????????????}?????????????
}
//集成封裝-緩沖拉長/透明度變幻/長寬動效
function?demo(obj,json,fn){
//flag用于判斷是否所有json都執(zhí)行完畢
var?flag=true;
//先清除定時器，防止迭代
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var?attr?in?json){
???//樣式獲取obj的attr屬性
???var?icur=0;
???if(attr=="opacity"){
???????????????????icur=Math.round(parseFloat(getStyle(obj,attr))*100);
???}else{
???icur=parseInt(getStyle(obj,attr));?????
???}
???//變加速,距離差越近速度越小，緩沖效果?
var?speed=(json[attr]-icur)/10;
//速度取整
if(speed>0){
speed=Math.ceil(speed);
}else{
speed=Math.floor(speed);
}
//檢測停止
if(icur!=json[attr]){
flag=false;????????????????????????????????????????
if(attr=="opacity"){
???????????????????????obj.style.filter="alpha(opacity:"+icur+speed+")";
???????????????????????obj.style.opacity=(icur+speed)/100;
}else{
???????obj.style[attr]=icur+speed+"px";
}
}
????????????????????if(flag){
?????????????????????clearInterval(obj.timer);?
?????????????????????//鏈式回調
if(fn){
???????????????????fn();
???????????????}
????????????????????}
????????????????}
},30);
}
//樣式BUG處理，解決offsetWidth漏洞問題
function?getStyle(obj,attr){
if(obj.currentStyle){
return?obj.currentStyle[attr];
}else{
????????????????return?getComputedStyle(obj,false)[attr];
}
}
</script>
</head>
<body>
????<ul>
?????<li>選項一</li>
?????<li>選項二</li>
?????<li>選項三</li>
????</ul>
</body>
</html>

0 回復有任何疑惑可以回復我~

收起回答