发新贴  快速回复

定时器课后练习之打分器

youshouyouba
2016-01-23 18:15
想在+1往上运动的同时,淡出,而不是在运动结束之后,除了回调函数,我就没有其他思路,下面的蓝色进度条我希望是在向右运动结束之后,淡出,文件见附件!
youshouyouba
自己顶一下
2016-01-23 21:16  回复本帖
youshouyouba
有人在吗?
2016-01-27 10:47  回复本帖
aocgame
 本帖最后由 aocgame 于 2016-1-28 11:00 编辑 

用css animation
https://jschr.github.io/textillate/


2016-01-28 10:55  回复本帖
youshouyouba
forum.php?mod=redirect&goto=findpost&pid=48578&ptid=16972
用css animation
https://jschr.github.io/textillate/

嗯,谢谢你的回答,你的意思是用那个封装好的函数,我的本意是,自己写的一个运动函数(见附件),然后用那个来实现,问题是怎么完善那个函数或者使用那个函数来实现!
2016-01-28 11:08  回复本帖
aocgame
 本帖最后由 aocgame 于 2016-1-28 12:06 编辑 

图片只是给你参考大神效果用的,你要的功能用css就能实现了,最简单的方法是直接去学习需要的效果改一改class就能用
如果是想要用js来实现css可以做的效果,那就太浪费精神了
2016-01-28 12:05  回复本帖
youshouyouba
forum.php?mod=redirect&goto=findpost&pid=48586&ptid=16972
图片只是给你参考大神效果用的,你要的功能用css就能实现了,最简单的方法是直接去学习需要的效果改一改cla ...

嗯,谢谢你的热心,你的意思我明白——效果实现可以“不择手段”,达到效果就行,我最近在研究原生的js,所以可能纠结在于是否可以用js实现……
2016-01-28 12:27  回复本帖
 
kongjiea
你这个效果就是源生js写的啊。
2016-01-28 14:02  回复本帖
youshouyouba
forum.php?mod=redirect&goto=findpost&pid=48600&ptid=16972
你这个效果就是源生js写的啊。

嗯,我知道是原生js写的,你没有看清我的原始的问题描述:“想在+1往上运动的同时,淡出,而不是在运动结束之后,除了回调函数,我就没有其他思路,下面的蓝色进度条我希望是在向右运动结束之后,淡出,文件见附件!”
2016-01-28 14:58  回复本帖
aocgame
閒閒沒事摸魚了5分鐘
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
*{ list-style-type:none; padding:0; margin:0;}
#box{ width:560px; height:500px; margin:100px auto; overflow:hidden;border:1px solid #CCC; position:relative;}
#bottom{ height:50px; border:1px solid #CCC; position:absolute; bottom:0; width:100%;}
#bottom a{ display:inline-block; width:50px; height:50px; line-height:50px; text-align:center; position:absolute;top:0; cursor:pointer;}
#bg{ width:0; height:50px; background:#03C; position:absolute;bottom:0;left:0;}


@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-120px);
    }
}
@-moz-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -moz-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -moz-transform: translateY(-120px);
    }
}
@-o-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -o-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -o-transform: translateY(-120px);
    }
}
@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-120px);
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    -moz-animation-name: fadeOutUp;
    -o-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}
.animated {
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}
</style>
<body>
<div id="box">
    <div id="bottom">
        <a>+1</a>
        <a>+1</a>
        <a>+1</a>
        <a>+1</a>
        <a>+1</a>
        <a>+1</a>
        <a>+1</a>
        <a>+1</a>
        <a>+1</a>
        <a>+1</a>
    </div>
    <div id="bg"></div>
</div>
<script src="domove.js"></script>
<script>
window.err=function(){
    var oA=document.getElementsByTagName('a');
    var oBottom=document.getElementById('bottom');
    var bg=document.getElementById('bg');
    for(var i=0;i<oA.length;i++){oA[i].index=i;oA[i].style.left=i*55+'px'}
    var num=0;
    var timer=null;
    oBottom.err=function(){
        domove(bg,'width',560,function(){
                domove(bg,'left',560)
        })
        timer=setInterval(function(){
            if(num<oA.length){
                oA[num++].setAttribute( "class", "animated fadeOutUp" );
            }else{clearInterval(timer)};
        },30)
    }
}
</script>
</body>
</html>
2016-01-28 15:22  回复本帖
aocgame
 本帖最后由 aocgame 于 2016-1-28 15:51 编辑 

用js要同时移动和渐渐消失没啥困难的,jquery已经实现了
$('a').animate({top: '300px', opacity: 'hide'}, 2000);
不过业界通常还是用css来处理
如果真想要用js来实现,那当然是参考jquery的function Animation( elem, properties, options ) 
2016-01-28 15:46  回复本帖
youshouyouba
forum.php?mod=redirect&goto=findpost&pid=48624&ptid=16972
用js要同时移动和渐渐消失没啥困难的,jquery已经实现了
$('a').animate({top: '300px', opacity: 'hide'}, ...

嗯,现在已经实现了,就是在运动函数里面传参数时候,传个json就行了
2016-02-02 15:23  回复本帖
登录 后才可以发表回复