JS动画效果_技术笔记

慕神7088389 2018-06-09

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>淘宝js运动</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);
    }

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

    #move img {
        border: none;
    }
    </style>
    <script type="text/javascript" src="../move.js"></script>
    <script>
        window.onload=function(){
            var oMove=document.getElementById('move'),
                aList=oMove.getElementsByTagName('a');

            for(var i=0;i<aList.length;i++){
                //onmouseenter不会影响子元素，不会引发事件冒泡
                aList[i].onmouseenter=function(){
                    var _this=this.getElementsByTagName('i')[0];
                    startMove(_this,{top:-25,opacity:0},function(){
                        _this.style.top=30+'px';
                        startMove(_this,{top:20,opacity:100});
                    });
                }
            }
        }
    </script>
</head>

<body>
    <div id='move'>
        <a href='#'><i><img src="images/tickets.png"></i><p>彩票</p></a>
        <a href='#'><i><img src="images/film.png"></i><p>电影</p></a>
        <a href='#'><i><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>

//完美运动框架

//获取css属性
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        //针对IE8获取元素某项css属性
        return obj.currentStyle[attr];
    } else {
        //针对其他浏览器，false为伪类选项
        return getComputedStyle(obj, false)[attr];
    }
}

//若传入fn(用于函数回调)执行链式运动
//startMove(obj,{attr1,iTarget1,attr2,iTarget2}, fn)
function startMove(obj, json, fn) {

    clearInterval(obj.timer);

    obj.timer = setInterval(function() {
        var flag = true; //每次循环初始化flag值,否则flag无法为true，定时器无法真正结束
        //for()in遍历循环,将json中以attr属性循环，json[attr]为它的对应值
        for (var attr in json) {
            //1.取当前值
            var iCur = 0;//初始化
            if (attr == 'opacity') {
                iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                iCur = parseInt(getStyle(obj, attr));
            }

            //2.算速度
            var speed = (json[attr] - iCur) / 5;
            //speed类整数变量需要判断取整
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            //3.检测停止
            //只要有一个运动目标没有完成，则flag为false，未完成运动继续执行
            //已达到的运动目标会因为speed最终等于0而“停止”，没有实际停止定时器
            if (iCur != json[attr]) {
                flag = false;
            }
            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:' + (iCur + speed) + ')';
                obj.style.opacity = (iCur + speed) / 100;
            } else {
                //用style[]追加变量，因为attr传入的是字符所以不能用style.xxx
                obj.style[attr] = iCur + speed + 'px';
            }
        }
        //如果flag成立，即所有运动目标完成，则停止定时器，判断是否有回调函数存在
        if (flag) {
            clearInterval(obj.timer);
            if (fn) {
                //为了不让fn()在回调时指向window，用call()改变this指向
                //var that=this也可以
                fn.call(obj);
            }
        }
    }, 10)//时间间隔,变更达到增减动画速度
}

11赞 · 0采集

00100000001 2018-04-18

转发：JS动画框架及案例链接 https://blog.csdn.net/qq_15096707/article/details/50571021

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

封闭式函数：执行类似淘宝跳上去又掉下来的效果 function getstyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } var alpha=30; function move(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var flag=true; for(var attr in json){ var curr=0; if(attr=="opacity"){ curr = Math.round(parseFloat(getstyle(obj,attr))*100); }else{ curr=parseInt(getstyle(obj,attr)); } //算速度 var speed=(json[attr]-curr)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //检测停止 if(curr!=json[attr]){ flag=false; } if(attr=="opacity"){ obj.style.filter="alpha(opacity:"+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+"px"; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },30) }

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

向上跑再掉下来的页面：

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

类似淘宝向上跑再掉下来 div id="move"> <a href="#"><i><img src="img/badge-circle-direction-right.png"/></i><p>彩票</p></a> <a href="#"><i><img src="img/badge-square-check.png"/></i><p>电影</p></a> <a href="#"><i><img src="img/badge-square-direction-down.png"/></i><p>音乐</p></a> <a href="#"><i><img src="img/circle-glass.png"/></i><p>缴费</p></a> </div>

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

*{padding:0; margin:0;} #move { padding: 10px; width: 300px; background: #f4f4f4; border: 1px solid #ccc; margin: 10px auto; } #move a{display:inline-block; width:58px; height:25px; background:#fff; border:1px solid #f00; border-radius:3px; text-align:center; margin:10px 17px; position:relative; padding-top:40px; color:#c9c9c9; 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); } #move a:hover{color:#f00;} #move img{border:none;} </style> <script src="move.js"></script>

截图
0赞 · 0采集
qq_与陌Dance_0 2017-08-16

样式： <style> * { margin: 0; padding: 0; } #move { padding: 10px; width: 300px; background: #f4f4f4; margin : 10px auto; border: 1px solid #ccc; margin: 10px auto; } #move a { display: inline-block; width: 58px; height: 25px; border: 1px solid #ddd; border-radius: 3px; background-color: #fff; text-align: center; margin: 10px 17px; 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; filter: alpha(opacity = 100); opacity: 1; } #move a:hover { color: #F00; } #move img { border: none; } </style>

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

这里有两个BUG：第一个肯定是不能执行回调涵数。只要把flag=true放到定时器下面。第二个就是当鼠标移动的时候会出现多次执行涵数，只要鼠标小小的动一下就会执行动画。只要把onmouseover 改成onmouseenter就可以了。这样两个BUG就都解决了 <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('move'); var aList=oDiv.getElementsByTagName('a'); for(var i=0;i<aList.length;i++){ aList[i].onmouseenter=function(){ var _this=this.getElementsByTagName('i')[0]; startMove(_this,{top:-25,opacity:0},function(){ _this.style.top=30+'px'; startMove(_this,{top:20,opacity:100}) }); } } } </script>

2赞 · 0采集
学习使我进步 2017-04-15

可以通过中间设定固定值，让它上去了之后从下面出来

截图
0赞 · 0采集
夜莺z 2017-03-17

在i标签中，字体是斜体字，font-style:normal可以去掉斜体。

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

纵向滚动一圈效果：减小top -> 设置top为一个较大的固定值 -> 减小top至原值

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

转一圈

截图
0赞 · 0采集
xiaobin90 2017-01-07

一、仿照淘宝转一圈再回来效果，直接在第一次动画结束后设置top到下面。二 mouseenter 事件在鼠标指针进入 div 元素时触发，唯一的区别是 onmouseenter 事件不支持冒泡。 onmouseover 事件在鼠标指针进入 div 元素时触发 ,在子元素上也会触发(p 和 span)。

截图
0赞 · 0采集
hs00 2016-12-10

overflow:hidden;//防止溢出 text-decoration:none;//去除li的小黑dian display:inline-block;//内联块位置变化，原点-向上移动-固定中间位置-向上运动回到原点

0赞 · 0采集
hs00 2016-12-10

window.load = function(){ var oMove = document.getElementById("move"); var aList = document.getElementByTagName("a"); for(var i=0;i<aList.length;i++){ aList.onmouseover = function(){ var _this = this.getElementByTagName("i")[0]; startMove(_this,{top:-25,opacity:0},function(){ _this.top = 30 + "px"; startMove(_this,{top:20,opacity:100}); }); } } }

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

overflow:hidden;//防止溢出 text-decoration:none;//去除li的小黑dian display:inline-block;//内联块位置变化，原点-向上移动-固定中间位置-向上运动回到原点

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

window.load = function(){ var oMove = document.getElementById("move"); var aList = document.getElementByTagName("a"); for(var i=0;i<aList.length;i++){ aList.onmouseover = function(){ var _this = this.getElementByTagName("i")[0]; startMove(_this,{top:-25,opacity:0},function(){ _this.top = 30 + "px"; startMove(_this,{top:20,opacity:100}); }); } } }

截图
0赞 · 0采集
qq_君莫笑_27 2016-11-08

实现图标翻动一圈，再回到原来的位置；原点->向上运动->中间重置位置->向上运动->回到原点；

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

<script> window.onload=function(){ var aList=document.getElementsByTagName('a'); for(var i=0;i<aList.length;i++){ aList[i].onmouseenter=function(){ var _this=this.getElementsByTagName('i')[0]; move(_this,{top:-30,opacity:0},function(){//注意top后面不要带px _this.style.top=30+'px';//为了图标回来的时候是从下面回来 move(_this,{top:25,opacity:100}) }) } } } </script>

0赞 · 0采集
momo012345 2016-10-31

for 循环里面闭包所以只有当前那个

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

<script> window.onload=function(){ var aList=document.getElementsByTagName('a'); for(var i=0;i<aList.length;i++){ aList[i].onmouseenter=function(){ var _this=this.getElementsByTagName('i')[0]; move(_this,{top:-15,opacity:0},function(){//注意top后面不要带px _this.style.top=25+'px';//为了图标回来的时候是从下面回来.这里必须用+来连接字符串 move(_this,{top:15,opacity:100}) }) } } } // 由于onmouseover事件冒泡，所以当鼠标在a标签内不断移动（不出a标签的范围）会不断碰到a标签内的子元素，事件再冒泡到a,使得不断出发a.onmouseover事件，结果就是里面的小图片不停地动，改成onmuseenter,这个事件不冒泡或者写代码取消onmouseover的冒泡。 </script>

截图
0赞 · 0采集
慕粉13721533677 2016-10-07

运动！

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

JS动画案例：

截图
0赞 · 0采集
youzai优哉游哉 2016-09-28

结合运动框架的图标小案例

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

<script> window.onload=function(){ var aList=document.getElementsByTagName('a'); for(var i=0;i<aList.length;i++){ aList[i].onmouseenter=function(){ var _this=this.getElementsByTagName('i')[0]; move(_this,{top:-15,opacity:0},function(){//注意top后面不要带px _this.style.top=25+'px';//为了图标回来的时候是从下面回来.这里必须用+来连接字符串 move(_this,{top:15,opacity:100}) }) } } } // 由于onmouseover事件冒泡，所以当鼠标在a标签内不断移动（不出a标签的范围）会不断碰到a标签内的子元素，事件再冒泡到a,使得不断出发a.onmouseover事件，结果就是里面的小图片不停地动，改成onmuseenter,这个事件不冒泡或者写代码取消onmouseover的冒泡。 </script>

1赞 · 3采集
慕工程2957023 2016-09-14

当鼠标移动的时候会出现多次执行涵数，只要鼠标小小的动一下就会执行动画。只要把onmouseover 改成onmouseenter就可以了。这样BUG就都解决了

2赞 · 0采集
hnmw 2016-08-18

overflow:hidden;//防止溢出 text-decoration:none;//去除li的小黑dian display:inline-block;//内联块

0赞 · 0采集
小小H罗 2016-08-05

http://blog.csdn.net/u014035151/article/details/52119598 全课程代码加理解，注释。完整代码 https://yunpan.cn/c66VPJfmcbZDN 访问密码 e163

2赞 · 1采集
KevinLL 2016-08-02

图片翻转效果

截图
0赞 · 0采集
小幸运17 2016-07-24

实现360旋转效果

截图
0赞 · 2采集

数据加载中...