JS动画效果_学习笔记

慕神7088389

<!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 采集收起来源：jQuery动画案例

2018-06-09

慕神7088389

<!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 采集收起来源：JS动画案例

2018-06-09

慕神7088389

ss

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>多物体运动</title>

        <style type="text/css">

            *{

                padding:0;

                margin:0;

            }

            ul,li{

                list-style: none;

            }

            ul li{

                width:200px;

                height:100px;
                line-height: 100px;

                background-color: chartreuse;

                margin-bottom:20px;
                opacity: 0.3;
                border: 2px solid #000;
                font-size: 18px;
                color: #000;

            }

        </style>
        <script type="text/javascript">
            window.onload=function(){
                var aLi=document.getElementsByTagName('li');

                for(var i=0;i<aLi.length;i++){
                    aLi[i].timer=null;
                    //width运动与opacity运动分开设定定时器
                    aLi[i].timerOpacity=null;
                    aLi[i].alpha=30;
                    aLi[i].onmouseover=function(){
                        startMove(this,400,100);
                    }
                    aLi[i].onmouseout=function(){
                        startMove(this,100,20);
                    }
                }
                
                // var timer=null;
                //设置共用定时器会导致多个目标争抢同一个定时器，导致每一个之前触发的物体运动无法结束，多物体运动不能设置共用变量，所以需要为每个li设置单独定时器
                function startMove(obj,iTarget,iOpacity){
                    clearInterval(obj.timer);
                    clearInterval(obj.timerOpacity);
                    obj.timer=setInterval(function(){
                        //这里不使用offsetWidth是因为它包含了边框等宽度，无法使元素本身的width达到目标值
                        var speed=(iTarget-parseInt(getStyle(obj,'width')))/8;
                        speed=speed>0?Math.ceil(speed):Math.floor(speed);
                        if(parseInt(getStyle(obj,'width'))==iTarget){
                            clearInterval(obj.timer);
                        }else{
                            //parseInt()取整数数字，去掉属性单位
                            obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px';
                            obj.style.fontSize=parseInt(getStyle(obj,'fontSize'))+speed/10+'px';
                        }
                    },30)

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

                    obj.timerOpacity=setInterval(function(){
                        // var oSpeed=(iOpacity-obj.style.opacity)/10;
                        //变速的值使得无法达成obj.alpha==iOpacity(小数存在)，先使用匀速
                        if(obj.alpha>iOpacity){
                            oSpeed=-10;
                        }else{
                            oSpeed=10;
                        }
                        if(obj.alpha==iOpacity){
                            clearInterval(obj.timerOpacity);
                        }else{
                            obj.alpha+=oSpeed;
                            obj.style.opacity=obj.alpha/100;
                        }
                    },30)
                }
            }
        </script>

    </head>

    <body>

        <ul>

            <li>ABC</li>

            <li>EFG</li>

            <li>123</li>

        </ul>

    </body>

</html>

查看全部

1 采集收起来源：获取样式

2018-06-08

阿宅娘

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title> 
  <style>
       *{padding:0;margin:0;}
       #div1{height:200px;width:200px;position:relative;background:#F00;left:-200px;top:0px;}
       #div2{height:200px;width:200px;background:#66F; filter:alpha(opacity:50);opacity:0.5;-moz-opacity:0.5;}
       #share{height:32px;line-height:16px;width:15px; background:#03F;color:#fff;position:absolute;left:200px;top:85px;}
       #ul li{height:50px;width:200px; background:#FF3;margin:10px 0px;border:4px solid #39F;opacity:1; filter:alpha(opacity:100); cursor:pointer;}
  </style> 
  <script>
  window.onload = function(){
      var oDiv=document.getElementById("div1");
      var aDiv=document.getElementById("div2");
      var aLi=document.getElementsByTagName("li");
      //鼠标移入,div1滑出
      oDiv.onmouseover = function(){
          startMove(oDiv,{left:0});
          }
      //鼠标移开,div1滑回
      oDiv.onmouseout = function(){
          startMove(oDiv,{left:-200});
          }
      //鼠标移入,div2透明度变100
      aDiv.onmouseover = function(){
          startMove(aDiv,{opacity:100});
          }
      aDiv.onmouseout = function(){
          startMove(aDiv,{opacity:30});
          }
      //黄块组合运动
      for(i=0;i<aLi.length;i++){ 
          aLi[i].timer=null;   //给每个li单独添加定时器，避免公用定时器
          aLi[i].onmouseover = function(){
              var nextE=this;
              startMove(this,{width:400,height:100},function(){
                  startMove(nextE,{opacity:50});
                  });
              }
          aLi[i].onmouseout = function(){
              startMove(this,{opacity:100,width:390,height:50});
              }
          }
      }
     //var timer=null;
    //json
//    var json = {a:2,b:7,c:0};
//    for(var i in json){
//        //alert(i);    //依次弹出变量a,b,c
//        alert(json[i]);  //依次弹出变量的值2,7,0
//        }
  
  
//Start运动框架
    //json语句
    //    var json = {a:2,b:7,c:0};
    //    for(var i in json){
    //        //alert(i);    //依次弹出变量a,b,c
    //        alert(json[i]);  //依次弹出变量的值2,7,0
    //        }
   //startMove(obj,{attr1:itarget1,attr2:itarget2},fn)    //attr表属性，iTarget表目标值，多个属性目标值组成json数组
  function startMove(e,json,fn){    //e表对象，json表{attr1:itarget1,attr2:itarget2,···}，fn表回调函数
      clearInterval(e.timer);        //清除定时器，e.timer表示给每个对象定义一个定时器，避免共用一个定时器
      e.timer = setInterval(function(){
           for(var attr in json){   //定义attr为json中的变量，即属性，遍历所有属性。避免一个属性变化完后，其他属性也停止变化
               var flag = true;     //假设所有属性都已经满足icur == json[attr]时，flag为true
             //取当前的值
              var icur=0;
              if(attr == 'opacity'){
                  icur=Math.round(parseFloat(getStyle(e,attr))*100); 
                  }
              else{
                  icur=parseInt(getStyle(e,attr));              
                  }
              //算速度
              var speed=(json[attr]-icur)/5;    
              speed=speed>0?Math.ceil(speed):Math.floor(speed);
              //检测停止
              if(icur != json[attr]){   //json[attr]表示iTarget,即如果当前存在属性值不等于目标值,flag值为false
                  flag=false;    
                  }
              if(attr == 'opacity'){
                  e.style.opacity=(icur+speed)/100;
                  e.style.filter="alpha(opacity:"+icur+speed+")";
                  }
              else{
                  e.style[attr]=icur+speed+"px";
                  }
            } 
          if(flag){     //flag为true，即所有当前属性值等于目标值时时，执行下面的方法
              clearInterval(e.timer3);
              if(fn){
                  fn();
                  }
            }
      },50)
      }
      //获取样式,兼容处理
  function getStyle(obj,attr){
      if(obj.currentStyle){
          return obj.currentStyle[attr];
          }
      else{
          return getComputedStyle(obj,false)[attr];
          }
      }
//End运动框架
  </script>
 </head> 
 <body> 
       <div id="div1">
           <span id="share">分享</span>
       </div>
       <div id="div2"></div>
       <ul id="ul">
           <li id="li1"></li>
           <li id="li2"></li>
           <li id="li3"></li>
       </ul>
 </body>
</html>

查看全部

4 采集收起来源：完美运动框架

2018-05-24

阿宅娘

//Start运动框架
    //json语句
    //    var json = {a:2,b:7,c:0};
    //    for(var i in json){
    //        //alert(i);    //依次弹出变量a,b,c
    //        alert(json[i]);  //依次弹出变量的值2,7,0
    //        }
   //startMove(obj,{attr1:itarget1,attr2:itarget2},fn)    //attr表属性，iTarget表目标值，多个属性目标值组成json数组
  function startMove(e,json,fn){    //e表对象，json表{attr1:itarget1,attr2:itarget2,···}，fn表回调函数
      clearInterval(e.timer);        //清除定时器，e.timer表示给每个对象定义一个定时器，避免共用一个定时器
      e.timer = setInterval(function(){
           for(var attr in json){   //定义attr为json中的变量，即属性，遍历所有属性。避免一个属性变化完后，其他属性也停止变化
               var flag = true;     //假设所有属性都已经满足icur == json[attr]时，flag为true
             //取当前的值
              var icur=0;
              if(attr == 'opacity'){
                  icur=Math.round(parseFloat(getStyle(e,attr))*100); 
                  }
              else{
                  icur=parseInt(getStyle(e,attr));              
                  }
              //算速度
              var speed=(json[attr]-icur)/5;    
              speed=speed>0?Math.ceil(speed):Math.floor(speed);
              //检测停止
              if(icur != json[attr]){   //json[attr]表示iTarget,即如果当前存在属性值不等于目标值,flag值为false
                  flag=false;    
                  }
              if(attr == 'opacity'){
                  e.style.opacity=(icur+speed)/100;
                  e.style.filter="alpha(opacity:"+icur+speed+")";
                  }
              else{
                  e.style[attr]=icur+speed+"px";
                  }
            } 
          if(flag){     //flag为true，即所有当前属性值等于目标值时时，执行下面的方法
              clearInterval(e.timer3);
              if(fn){
                  fn();
                  }
            }
      },50)
      }
      //获取样式,兼容处理
  function getStyle(obj,attr){
      if(obj.currentStyle){
          return obj.currentStyle[attr];   //IE
          }
      else{
          return getComputedStyle(obj,false)[attr];   //FireFox及谷歌
          }
      }
//End运动框架

查看全部

1 采集收起来源：完美运动框架

2018-05-24

阿宅娘

getStyle()方法：opacity(透明度)需另外判断

查看全部

0 采集收起来源：任意属性值（二）

2018-05-24

阿宅娘

运动框架实现思路

速度（改变值left、right、width、height、opacity）
缓冲（先快后慢，先慢后快等）
多物体运动
任意值变化（宽变、高变等）
链式运动（执行一个运动后，紧接着执行另一个运动）
同时运动（所有属性同时变化）

查看全部

0 采集收起来源：JS动画效果课程介绍

2018-05-23

孔天逸 00:28

Html+css的制作。加上前台页面。制作前台出网页

查看全部

0 采集收起来源：JS动画效果课程介绍

2018-05-19

qq_善水_0 12:32

代码截图

查看全部

0 采集收起来源：JS速度动画

2018-05-16

qq_善水_0 03:30

主要内容

查看全部

0 采集收起来源：JS动画效果课程介绍

2018-05-16

这就尴尬了

获取样式值封装函数

function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj,false)[attr]

}

查看全部

0 采集收起来源：获取样式

2018-05-02

这就尴尬了

主要是多物体运动，所有元素值都不能共用。

查看全部

0 采集收起来源：JS多物体动画

2018-05-02

qq_小乖_7

function startMove(obj,json,fn){

var flag =true; //设定所有假设都成立

clearInterval(obj.timer);

obj.timer =setInterval(function(){

for(attr in json){

var icur =0;

if(attr =='opacity'){

var icur =parseFloat(getStyle(obj,attr)*100);

}else{

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

}

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

speed =speed>0? Math.ceil(speed) : Math.floor(speed);

if(json[attr] != icur){

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)

}

function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr];

} //基于IE

else{

return getComputedStyle(obj,false)[attr];

}

查看全部

2 采集收起来源：完美运动框架

2018-04-20

00100000001

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

查看全部

0 采集收起来源：JS动画案例

2018-05-07

贝壳壳

1、所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。

注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=100)

2、由于无法获取对象的透明度，所以可通过变量储存。（var alpha=初始值 alpha+=speed）

3、IE：style.filter=‘alpha(opactiy:’+值+')' 非IE .style.opactiy=值/100（火狐或者chrome关于透明度的满值1，IE是100）

查看全部

3 采集收起来源：JS透明度动画

2018-04-12

热搜

最近搜索清空

JS动画效果