JS动画效果_技术笔记

慕圣6698645 2019-01-11

阿里巴巴矢量图标库
www.iconfont.cn

1赞 · 2采集

慕神7088389 2018-06-09

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>淘宝jQ运动</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    #move {
        width: 240px;
        margin: 10px auto;
        background-color: #f5f4f4;
        border: 1px solid #ccc;
        overflow: hidden;
    }

    #move a {
        float: left;
        display: inline-block;
        width: 58px;
        height: 25px;
        border: 1px solid #ddd;
        border-radius: 3px;
        background: #fff;
        text-align: center;
        margin: 10px 10px;
        position: relative;
        padding-top: 40px;
        color: #9c9c9c;
        font-size: 12px;
        text-decoration: none;
        line-height: 25px;
        overflow: hidden;
    }

    #move a i {
        position: absolute;
        top: 20px;
        left: 0;
        display: inline-block;
        width: 100%;
        text-align: center;
        opacity: 1;
        filter: alpha(opacity=100);
        /*transition: all .3s ease-in;*/
    }

    #move a:hover {
        color: #f00;
    }

    #move a:hover .i1{
        -webkit-animation: taobao .5s ease-in-out .1s;
        -o-animation: taobao .5s ease-in-out .1s;
        animation: taobao .5s ease-in-out .1s;
    }

    /*#move a:hover .i1 {*/
        /*top: -25px;*/
        /*opacity: 0;*/
    /*}*/
    @keyframes taobao {
        from{
            top: 20px;
            opacity: 1;
        }
        50%{
            top: -25px;
            opacity: 0;
        }
        75%{
            top: 30px;
            opacity: 0;
        }
        to{
            top: 20px;
            opacity: 1;
        }
    }

    #move img {
        border: none;
    }
    </style>
    <!--<script type="text/javascript" src="jQ/jquery-1.4.4.min.js"></script>-->
    <!-- <script>
        $(function(){
            $('#move a').mouseenter(function(){
                $(this).find('i').animate({top:'-25px',opacity:'0'},300,'swing',function(){
                    $(this).css({top:'30px'})
                    $(this).animate({top:'20px',opacity:'1'},300,'swing')
                })
            })
        })
    </script> -->
</head>

<body>
    <div id='move'>
        <a href='#'><i class="i1"><img src="images/tickets.png"></i><p>彩票</p></a>
        <a href='#'><i class="i2"><img src="images/film.png"></i><p>电影</p></a>
        <a href='#'><i class="i3"><img src="images/fork.png"></i><p>外卖</p></a>
        <a href='#'><i><img src="images/fly.png"></i><p>缴费</p></a>
        <a href='#'><i><img src="images/game.png"></i><p>游戏</p></a>
        <a href='#'><i><img src="images/protection.png"></i><p>理财</p></a>
    </div>
</body>

</html>

3赞 · 0采集

慕粉3221337 2017-12-06

function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj, false)[attr]; } } function moveStart(obj, json, fn){ clearInterval(obj.timerId); obj.timerId = setInterval(function(){ var flag = true; for(var key in json){ var cur; if(key == 'opacity'){ cur = Math.round(parseFloat(getStyle(obj, key)*100)); }else{ cur = parseInt(getStyle(obj, key)); } var speed = cur < json[key] ? Math.ceil((json[key] - cur)/20) : Math.floor((json[key] - cur)/20); if(cur != json[key]){ flag = false; if(key == 'opacity'){ obj.style.opacity = (cur+speed)/100; obj.style.filter = "alpha(opacity=" + (cur+speed) + ")"; }else{ obj.style[key] = cur + speed + "px"; } } } if(flag){ clearInterval(obj.timerId); if(fn){ fn(); } } }, 30); }

0赞 · 0采集
慕仙5237505 2017-11-02

//jquery top值的写法：加了""号 $(this).css({top:"30px"}); $(this).animate({top:"20px",opacity:"1"},300); //与js不同"20px"加了引号 //js写法 _this.style.top=30+"px"; //类似淘宝转一圈的效果 move(_this,{top:20,opacity:100});

截图
0赞 · 0采集
慕仙5237505 2017-11-02

jquary 写法

截图
0赞 · 0采集
慕粉3856185 2017-08-20

很不错，学到了好多，最后jQuery一下搞出来，感觉自己都可以写框架了

0赞 · 0采集
qq_与陌Dance_0 2017-08-17

<script type="text/javascript"> $(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"-25px",opacity:"0"},300,function(){ $(this).css('top','30px'); $(this).animate({top:"20px",opacity:"1"},200); }) }) }) </script>

0赞 · 0采集
小虾学前端 2017-06-22

运动框架

0赞 · 0采集
梦魂清风 2017-05-25

jquery封装好的animate使用方法.

截图
0赞 · 0采集
慕粉2051358721 2017-04-20

本次课程主要是学习了动画效果，从简单的动画到缓冲动画多物体动画到链式动画再到同时运动。囊括了大部门页面的动画效果

0赞 · 0采集
无赖7 2017-04-03

$(function(){ $('#bm a').mouseenter(function(){ $(this).find('i').animate({top:'-35px',opacity:'0'},100,function(){ $(this).css({top:"30px"}); $(this).animate({top:'10px',opacity:'1'}) }) }) })

0赞 · 0采集
白小九 2017-03-08

使用JQ实现纵向滚动一圈的效果

截图
0赞 · 0采集
learning2 2017-03-05

jq实现动画效果

截图
0赞 · 0采集
l柳条妹妹 2017-01-11

jQ实现运动

截图
0赞 · 0采集
懒癌患者L 2016-11-29

用jquery实现同样效果

截图
0赞 · 0采集
s_nn 2016-11-21

<script> $(function(){ $("#move a").mouseenter(function(){ $(this).find('i').animate({top:"-25x",opacity:"0"},300,function(){ $(this).css({top:"30px"}); $(this).animate({top:"20px",opacity:"1"},200) }) }) }) </script>

截图
1赞 · 0采集
冷月诗魂 2016-11-16

jQuery动画案例通过改变setInterval()的时间值，改变动画的快和慢 jq方法实现动画效果： <script src="js/move.js"></script> <script> $(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"-25px",opacity:"0"},300,function(){ //300表示速度，以毫秒为单位，也可用非数值的"slow"、"fast"等表示 $(this).css({top:"30px"}); $(this).animate({top:"20px",opacity:"1"},200) }) }) }) </script> <body> <div id="move"> <a href="#"><i><img src="..."/></i><p>...</p></a> ...... <a href="#"><i><img src="..."/></i><p>...</p></a> </div> </body>

0赞 · 0采集
0_0不懂 2016-11-05

<script type="text/javascript" src="js/jquery.min.js"></script> <script> $(function(){ $('#move a').mouseenter(function(){ $(this).find('img').animate({top:'-30px',opacity:'0'},300,function(){ $(this).css({top:'30px'}); $(this).animate({top:'25px',opacity:'1'},200) }) }) }) </script>

0赞 · 0采集
GoingForward 2016-10-16

<script type="text/javascript" src="js/jquery.min.js"></script> <script> $(function(){ $('#move a').mouseenter(function(){ $(this).find('img').animate({top:'-15px',opacity:'0'},300,function(){ $(this).css({top:'30px'}); $(this).animate({top:'15px',opacity:'1'},200) }) }) }) </script>

0赞 · 0采集
慕函数7099457 2016-10-12

缓冲 speed变量互决定变化量链式调用 fn 同步 json 很短的时间执行多个变化多个setinterval 的停止 this

截图
0赞 · 0采集
慕斯8597481 2016-10-08

用jQuery实现动画效果时间如果用数值，单位为毫秒，也可以用slow或者fast

截图
0赞 · 0采集
慕斯8597481 2016-10-08

用js实现动画效果

截图
0赞 · 0采集
BeingTowards 2016-10-03

JQuery实现动画案例：

截图
0赞 · 0采集
jazia 2016-09-24

<script> $(function(){ $('#bianming a').mouseenter(function(){//Jquery去掉on $(this).find('i').animate({top:'-15px',opacity:'0'},300,function(){ $(this).css({top:'25px'});//animate和css里面必须加中括号{}，属性值必须加引号 $(this).animate({top:'15px',opacity:'1'},200); }) }) })//300表示速度，以毫秒为单位，也可用非数值的"slow"、"fast"等表示

0赞 · 0采集
慕粉3909210 2016-09-20

jquery

截图
0赞 · 0采集
慕工程2957023 2016-09-14

jQuery动画案例通过改变setInterval()的时间值，改变动画的快和慢 jq方法实现动画效果： <script src="js/move.js"></script> <script> $(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"-25px",opacity:"0"},300,function(){ //300表示速度，以毫秒为单位，也可用非数值的"slow"、"fast"等表示 $(this).css({top:"30px"}); $(this).animate({top:"20px",opacity:"1"},200) }) }) }) </script> <body> <div id="move"> <a href="#"><i><img src="..."/></i><p>...</p></a> ...... <a href="#"><i><img src="..."/></i><p>...</p></a> </div> </body>

1赞 · 1采集
Tangless 2016-09-05

jQuery方法实现动画效果

截图
0赞 · 0采集
qq_刘先森_ 2016-08-03

防止鼠标事件多次触发，采用onmouseenter代替onmouseover

0赞 · 0采集
qq_刘先森_ 2016-08-03

防止鼠标事件多次触发，采用onmouseenter代替onmouseover

0赞 · 0采集
Oooooooh 2016-07-10

当鼠标移入时触发动画效果 top值变为负，透明度变为0；然后在animate方法的回调函数里面再植入恢复原来效果的还原动画

截图
0赞 · 0采集

数据加载中...