精华内容
下载资源
问答
  • js动画效果

    2013-05-04 08:08:47
    js动画效果
  • JS动画效果

    2016-12-10 12:21:14
    JS动画效果JavaScript 动画框架 框架封装相信大家在很多门户网站上都可以看到动画的交互效果,通过这些动画生动地体现了我们在网页上的交互效果,现在我们就来学习一下这些动画效果的分解动作吧。作为学习了网页设计...

    JS动画效果

    JavaScript 动画框架 框架封装


    相信大家在很多门户网站上都可以看到动画的交互效果,通过这些动画生动地体现了我们在网页上的交互效果,现在我们就来学习一下这些动画效果的分解动作吧。作为学习了网页设计初步的一个进阶选修课。

    动画的实现思路都是通过连续改变物体的属性值来实现效果的。一般来说都是改变一个物体的left,right,width,height,opacity.

    一.简单动画

    1.透明度动画
    首先一点预备知识,下面是两种浏览器的透明度的属性表示,且都是表示0.3的透明度,1表示不透明。

    IE浏览器透明度:filter: alpha(opacity:30);
    Chrome浏览器透明度:opacity: 0.3;
    一个简单的Div透明度改变动画实例:

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body,div{
                margin: 0;
                padding: 0;
            }
            #div1{
                width: 200px;
                height:200px;
                background:red;
                filter: alpha(opacity:30);
                opacity: 0.3;
            }
        </style>
        <script>
            var timer = null;
            var alpha = 30;
            function startMove(iTarget) {
                var oDiv = document.getElementById('div1');
                clearInterval(timer);
                timer=setInterval(function () {
                    var speed = iTarget > alpha ? 10 : -10;
                    if (iTarget == alpha){
                        clearInterval(timer);
                    }else {
                        alpha+=speed;
                        oDiv.style.filter ='alpha(opacity:'+alpha+')';
                        oDiv.style.opacity = alpha/100;
                    }
                },30);
            }
            window.onload=function () {
                var oDiv = document.getElementById('div1');
                oDiv.onmouseover=function () {
                    startMove(100);
                }
                oDiv.onmouseout = function () {
                    startMove(30);
                }
            }
        </script>
    </head>
    <body>
    <div id="div1"></div>
    </body>

    2.速度动画
    速度动画通过改变物体的坐标或者说距离他的父容器的左侧和上面的距离来实现。比如先获取一个div,在改变style中的left属性。下面的例子就是一个鼠标移入整个div右滑动,鼠标移开恢复原状。HTML样式是上个例子的样式,这里就不贴出了,一些细节的解释在代码中。

    <script>
            window.onload=function () {
                //提取全局变量
                var timer = null;
                var div = document.getElementById('div1');
    
                function startMove(speed, target) {
                    //定时器初始化
                    clearInterval(timer);
                    timer = setInterval(function () {
                        if (div.offsetLeft == target){
                            clearInterval(timer);
                        }else {
                            div.style.left = div.offsetLeft + speed;
                        }
                    },30);
                }
    
                div.onmouseover = startMove(10,0);
                div.onmouseout = startMove(-10,-200);
    
            }
        </script>

    二.缓存动画

    同样是速度动画的例子里的,现在我们改变一下让他可以实现一个缓存的速度动画,并且速度越来越快。

    <script>
            var timer = null;
            function startMove(iTarget) {
                clearInterval(timer);
                var div = document.getElementById('div1');
                timer = setInterval(function () {
                    var speed = (iTarget - div.offsetLeft)/10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if(div.offsetLeft == iTarget){
                        clearInterval(timer);
                    }else{
                        div.style.left = div.offsetLeft + speed + 'px';
                    }
                },30);
            }
            window.onload = function () {
                var div = document.getElementById('div1');
                div.onmouseover=function () {
                    startMove(0);
                }
                div.onmouseout=function () {
                    startMove(-200);
                }
            }
        </script>

    三.多物体动画

    多物体运动可以理解成多个单个物体的简单运动(有点拗口啊),从程序执行的角度来说,就是遍历设置每个物体的动画。下面的例子都是上面的简单动画例子的集成而已。

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body,ul{
                margin: 0;
                padding: 0;
            }
            ul,li{
                list-style: none;
            }
            ul li{
                width: 200px;
                height: 100px;
                background: yellow;
                margin-bottom: 20px;
            }
        </style>
        <script>
            function startMove(obj, target) {
                clearInterval(obj.timer);
                obj.timer=setInterval(function () {
                    var speed = (target-obj.offsetWidth)/8;
                    speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
                    if (obj.offsetWidth == target){
                        clearInterval(obj.timer);
                    }else {
                        obj.style.width = obj.offsetWidth + speed + 'px';
                    }
                },30);
            }
            window.onload=function () {
                var aLi = document.getElementsByTagName('li');
                for (var i=0;i<aLi.length;i++){
                    aLi[i].timer = null;
                    aLi[i].onmouseover = function () {
                        startMove(this,400);
                    }
                    aLi[i].onmouseout = function () {
                        startMove(this,200);
                    }
                }
            }
        </script>
    </head>
    <body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    </body>
    </html>

    四.链式动画

    首先把上面的简单运动框架抽取出来然后加上透明度的变化,放进一个人通用的JS文件里movement.js:

    function getStyle(obj,attr) {
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else {
            return getComputedStyle(obj,false)[attr];
        }
    }
    function startMove(obj,attr,target,fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var icur = 0 ;
            if (attr == 'opacity'){
                icur = Math.round(parseFloat(getStyle(obj,attr))*100);
            }else {
                icur =  parseInt(getStyle(obj,attr));
            }
            var speed = (target - icur)/8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (icur == target){
                clearInterval(obj.timer);
                if (fn){
                    fn();
                }
            }else {
                if (attr == 'opacity'){
                    obj.style.filter = 'alpha:(opacity;'+icur+speed+')';
                    obj.style.opacity = (icur+speed)/100;
                }else {
                    obj.style[attr] = icur + speed + 'px';
                }
            }
        },30);

    然后我们简单的做一个长200px宽100px的透明度0.3黄色长方形先变长成400px然后宽长成200px,然后也是完全不透明(透明度1.0)的,鼠标移除再依次还原。

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>链式运动框架</title>
        <style>
            body,ul,li{
                margin: 0;
                padding: 0;
            }
            ul,li{
                list-style: none;
            }
            ul li{
                width: 200px;
                height: 100px;
                background: yellow;
                margin-bottom: 20px;
                border: 4px solid #000;
                filter: alpha(opacity:30);
                opacity: 0.3;
            }
        </style>
        <script src="move.js"></script>
        <script>
            window.onload = function () {
                var li = document.getElementById('li1');
                li.onmouseover=function () {
                    startMove(li,'width',400,function () {
                        startMove(li,'height',200,function () {
                            startMove(li,'opacity',100);
                        })
                    });
                }
                li.onmouseout=function () {
                    startMove(li,'opacity',30,function () {
                        startMove(li,'height',100,function () {
                            startMove(li,'width',200);
                        })
                    })
                }
            }
        </script>
    </head>
    <body>
        <ul>
            <li id="li1"></li>
        </ul>
    </body>
    </html>

    五.同时运动

    上面的框架都是单个运动动作,如果要实现同时运动,我们就需要借助json了。

    JSON的格式:
    {键:值,键:值}
    完善后的运动框架js:movement.js

    function getStyle(obj,attr) {
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else {
            return getComputedStyle(obj,false)[attr];
        }
    }
    function startMove(obj,json,fn) {
        flag=true;
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            for (var attr in json){
                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)/8;
                speed = speed > 0 ? Math.ceil(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);
    }

    然后把链式运动的代码改成

    startMove(li,{'width':400,'height':200,'opacity':100});

    效果果然是可以同时运动的。

    展开全文
  • Js动画效果

    2018-08-15 19:16:41
    缓冲动画模板:参考链接:https://www.jianshu.com/p/36086c9f0237 缓冲动画算法:https://segmentfault.com/a/1190000011411704

    缓冲动画模板:参考链接:https://www.jianshu.com/p/36086c9f0237
    缓冲动画算法:https://segmentfault.com/a/1190000011411704

    展开全文
  • 原生js动画效果

    2018-03-27 10:31:03
    原生js动画效果,方便调用,可以链式调用,可以添加多个属性
  • 九种原生js动画效果

    2020-10-23 08:42:30
    主要介绍了九种原生js动画效果,个个都非常精彩,都值得大家学习,需要的朋友可以参考下
  • js 动画效果实现

    2019-03-21 18:25:00
    1. 实现方式 - 应用场景 自己写 - 简单的、不用 jq 的项目 jq - 普通动画 ...九种原生js动画效果 Tween.js FlexSlider插件 velocity.js 动画插件 转载于:https://www.cnblogs.com/justSmile2/p/105...

    1. 实现方式 - 应用场景

    自己写 - 简单的、不用 jq 的项目

    jq - 普通动画

    成熟插件 - 复杂动画

     

    2. 相关文章

    JavaScript基于时间的动画算法

    九种原生js动画效果

    Tween.js

    FlexSlider插件

    velocity.js 动画插件

     

    转载于:https://www.cnblogs.com/justSmile2/p/10573568.html

    展开全文
  • JS动画效果代码3

    2020-10-30 12:17:44
    js实现的动画效果
  • 主要介绍了JS动画效果打开、关闭层的实现方法,可实现js控制层从中心位置打开与关闭的功能,涉及javascript操作页面元素的相关技巧,需要的朋友可以参考下
  • js动画效果图片切换

    2013-08-14 10:01:49
    js动画效果图片切换,只需要准备若干幅大小相同的图片,在页面中引用RevealTrans.js,然后把RevealTrans.htm中对应代码粘到页面中你要放图片的地方,代码中图片的路径改成你自己的,是不是很方便呢
  • 某课网----------------JS动画效果的所有课程源代码,包括图片素材,都可直接运行。(含注释)
  • 33款JQuery或JS动画效果的导航菜单
  • 9种原生js动画效果(转) 文章目录9种原生js动画效果(转)匀速动画效果缓冲动画效果透明度动画多物体动画获取样式动画多物体复杂动画多物体复杂动画(带透明度的)链式动画多物体同时运动动画 匀速动画效果 window....

    9种原生js动画效果(转)

    匀速动画效果

    window.onload = function(){
     var odiv = document.getElementById('odiv');
     odiv.onmouseover = function(){
      startMover(0);
     }
     odiv.onmouseout = function(){
      startMover(-200);
     }
    }
    var timer = null;
    function startMover(itarget){//目标值
     clearInterval(timer);//执行当前动画同时清除之前的动画
     var odiv = document.getElementById('odiv');
     timer = setInterval(function(){
     var speed = 0;
     if(odiv.offsetLeft > itarget){
      speed = -1;
     }
     else{
      speed = 1;
     }
     if(odiv.offsetLeft == itarget){
      clearInterval(timer);
     }
     else{
      odiv.style.left = odiv.offsetLeft+speed+'px';
      }
     },30);
    }
    

    缓冲动画效果

    window.onload = function(){
     var odiv = document.getElementById('odiv');
     odiv.onmouseover = function(){
      startMover(0);
     }
     odiv.onmouseout = function(){
      startMover(-200);
     }
    }
    var timer = null;
    function startMover(itarget){//速度和目标值
     clearInterval(timer);//执行当前动画同时清除之前的动画
     var odiv = document.getElementById('odiv');
     timer = setInterval(function(){
     var speed = (itarget-odiv.offsetLeft)/10;//缓冲动画的速度参数变化值
     //如果速度是大于0,说明是向右走,那么就向上取整
     speed = speed>0?Math.ceil(speed):Math.floor(speed);
     //Math.floor();向下取整
     if(odiv.offsetLeft == itarget){
      clearInterval(timer);
     }
     else{
      //clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离 
      odiv.style.left = odiv.offsetLeft+speed+'px';
      }
     },30);
    }
    

    透明度动画

    window.onload = function(){
     var odiv = document.getElementsByTagName('div');
     for(var i=0;i<odiv.length;i++)
     {
       odiv[i].onmouseover = function(){
       startOP(this,100);
      }
      odiv[i].onmouseout = function(){
       startOP(this,30);
      }
      odiv[i].timer = null;//事先定义
      odiv[i].alpha = null;//事先定义
      //这里发现一个问题,对象的动画属性可以不定义,但是透明度属性必须定义,否则报错
     }
    }
    function startOP(obj,utarget){
      clearInterval(obj.timer);//先关闭定时器
      obj.timer = setInterval(function(){
      var speed = 0;
      if(obj.alpha>utarget){
      speed = -10;
      }
      else{
      speed = 10;
      }
      obj.alpha = obj.alpha+speed;
      if(obj.alpha == utarget){
      clearInterval(obj.timer);
      }
      obj.style.filter = 'alpha(opacity:'+obj.alpha+')';//基于IE的
      obj.style.opacity = parseInt(obj.alpha)/100;
      },30); 
    }
    

    多物体动画

    window.onload = function(){
     var olist = document.getElementsByTagName('li');
     for(var i=0; i<olist.length;i++)
     {
      olist[i].onmouseover = function(){
      startmov(this,400);
      };
      olist[i].onmouseleave = function(){
      startmov(this,200);
      };
      olist[i].timer = null;
     }
     function startmov(obj,itarget){
      clearInterval(obj.timer);//执行动画之前清除动画
      obj.timer = setInterval(function(){
       var speed =0;
       speed = (itarget - obj.offsetWidth)/8;
       speed = speed>0?Math.ceil(speed):Math.floor(speed);
       if(obj.offsetWidth == itarget){
       clearInterval(obj.timer);
       }
       else{
       obj.style.width = obj.offsetWidth+speed+'px';
       }
      },30);
     }
    }
    

    获取样式动画

    window.onload = function(){
            var odiv = document.getElementById('odiv');
            odiv.onmouseover = function(){
                startMov(this);
            };
            function startMov(obj){
                setInterval(function(){
                    obj.style.width = parseInt(getStyle(obj,'width'))+1+'px';
                    obj.style.fontSize = parseInt(getStyle(obj,'fontSize'))+1+'px';
                },30);
            }
            function getStyle(obj,attr)
            {
                if(obj.currentStyle){
                    return obj.currentStyle[attr];
                }
                else{
                    return getComputedStyle(obj,false)[attr];
                }
            }
        }
    

    多物体复杂动画

    window.onload = function(){
     var li1 = document.getElementById('li1');
     var li2 = document.getElementById('li2');
     li1.onmouseover = function(){
      startMov(this,400,'width');
     };
     li1.onmouseout = function(){
      startMov(this,200,'width');
     };
     li2.onmouseover = function(){
      startMov(this,200,'height');
     };
     li2.onmouseout = function(){
      startMov(this,100,'height');
     };
     function startMov(obj,itarget,attr){
      clearInterval(obj.timer);//执行动画之前清除动画
      obj.timer = setInterval(function(){
       var icur = parseInt(getStyle(obj,attr));
       var speed =0;
       speed = (itarget - icur)/8;
       speed = speed>0?Math.ceil(speed):Math.floor(speed);
       if(icur == itarget){
       clearInterval(obj.timer);
       }
       else{
       obj.style[attr] = icur+speed+'px';
       }
      },30);
     }
     function getStyle(obj,attr)
     {
      if(obj.currentStyle){
      return obj.currentStyle[attr];
      }
      else{
      return getComputedStyle(obj,false)[attr];
      }
     }
    }
    

    多物体复杂动画(带透明度的)

    window.onload = function(){
     var li1 = document.getElementById('li1');
     var li2 = document.getElementById('li2');
     li1.onmouseover = function(){
      startMov(this,100,'opacity');
     };
     li1.onmouseout = function(){
      startMov(this,30,'opacity');
     };
     li2.onmouseover = function(){
      startMov(this,200,'height');
     };
     li2.onmouseout = function(){
      startMov(this,100,'height');
     }
     li1.timer = null;
     li2.timer = null;
     function startMov(obj,itarget,attr){
      clearInterval(obj.timer);//执行动画之前清除动画
      obj.timer = setInterval(function(){
       var icur = 0;
       if(attr == 'opacity'){
       icur = Math.round(parseFloat(getStyle(obj,attr))*100);//转换成整数,并且四舍五入下
       //计算机在计算小数的时候往往是不准确的!
       }
       else{
       icur = parseInt(getStyle(obj,attr));
       }
       var speed =0;
       speed = (itarget - icur)/8;
       speed = speed>0?Math.ceil(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';
        } 
       }
      },30);
     }
     function getStyle(obj,attr)
     {
      if(obj.currentStyle){
      return obj.currentStyle[attr];
      }
      else{
      return getComputedStyle(obj,false)[attr];
      }
     }
    }
    

    链式动画

    window.onload = function(){
     var li1 = document.getElementById('li1');
     li1.onmouseover = function(){
      startMov(li1,400,'width',function(){
       startMov(li1,200,'height',function(){
       startMov(li1,100,'opacity');
       });
      });
     };
     li1.onmouseout = function(){
      startMov(li1,30,'opacity',function(){
       startMov(li1,100,'height',function(){
       startMov(li1,100,'width');
       });
      });
     };
     li1.timer = null;
     function startMov(obj,itarget,attr,fn){//fn回调函数
      clearInterval(obj.timer);//执行动画之前清除动画
      obj.timer = setInterval(function(){
       var icur = 0;
       if(attr == 'opacity'){
       icur = Math.round(parseFloat(getStyle(obj,attr))*100);//转换成整数,并且四舍五入下
       //计算机在计算小数的时候往往是不准确的!
       }
       else{
       icur = parseInt(getStyle(obj,attr));
       }
       var speed =0;
       speed = (itarget - icur)/8;
       speed = speed>0?Math.ceil(speed):Math.floor(speed);
       if(icur == itarget){
       clearInterval(obj.timer);
       if(fn){
        fn();
       }
       }
       else{
        if(attr == 'opacity'){
        obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
        obj.style.opacity = (icur+speed)/100;
        }
        else{
        obj.style[attr] = icur+speed+'px';
        } 
       }
      },30);
     }
     function getStyle(obj,attr)
     {
      if(obj.currentStyle){
      return obj.currentStyle[attr];
      }
      else{
      return getComputedStyle(obj,false)[attr];
      }
     }
    }
    

    多物体同时运动动画

    window.onload = function(){
     var li1 = document.getElementById('li1');
     li1.onmouseover = function(){
      startMov(li1,{width:201,height:200,opacity:100});
     };
     li1.onmouseout = function(){
      startMov(li1,{width:200,height:100,opacity:30});
     };
     li1.timer = null;
     function startMov(obj,json,fn){//fn回调函数
      clearInterval(obj.timer);//执行动画之前清除动画
      var flag = true;//是否动画都完成了
      obj.timer = setInterval(function(){
       for(var attr in json){
       var icur = 0;
       if(attr == 'opacity'){
       icur = Math.round(parseFloat(getStyle(obj,attr))*100);//转换成整数,并且四舍五入下
       //计算机在计算小数的时候往往是不准确的!
       }
       else{
       icur = parseInt(getStyle(obj,attr));
       }
       var speed =0;
       speed = (json[attr] - icur)/8;
       speed = speed>0?Math.ceil(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);
     }
     function getStyle(obj,attr)
     {
      if(obj.currentStyle){
      return obj.currentStyle[attr];
      }
      else{
      return getComputedStyle(obj,false)[attr];
      }
     }
    }
    

    在这里插入图片描述

    展开全文
  • JS动画效果代码2

    2020-10-30 12:17:59
    js实现的图片生成效果代码,学习js的朋友可以看看
  • 展开收起js动画效果

    千次阅读 2019-01-20 13:39:43
    展开收起js动画效果 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Adobe Dreamweaver CC 2017 Java Script 作者:林敏静 撰写时间:2019年1月18日 ^^^^^^^^^...
  • A*寻径js动画效果

    2011-05-30 15:02:02
    A*寻径js动画效果,利用js实现的A*寻径法。页面中有详细注释。
  • 主要介绍了使用js让图片组成动画,这样就可以用js动画了,大家参考使用吧
  • 上一篇”JS动画效果”中使用setInterval()定时修改对象样式,从而实现动画效果。修改对象样式时需要获取对象原有的样式值,通过对象的offsetLeft、offsetWidth等属性来获取对象的样式。但在运用中,offsetLeft、...
  • 昨天看到谷歌的主页上出现了几个动画,发现不是flash做的,而是用js+图片实现的!今天把拷贝到的图片,用js实现了动画效果
  • js模拟弹窗效果代码,用层实现提示效果代码
  • 多html5精美模板,含大量css特效,js动画效果,以及精美图片实例
  • js动画效果》之透明度动画

    千次阅读 2014-10-11 11:57:49
    学习资源来自慕课网《js动画效果》:http://www.imooc.com/learn/167
  • 常见JS动画效果

    万次阅读 多人点赞 2017-09-27 14:06:15
    人们浏览网页时,若一个网页动画效果丰富炫酷,性能良好,体验度良好,自然会受到吸引去打来浏览。吸引用户,自然少不了网页的布局优美、色彩搭配的恰当,更重要的是其中吸引人的炫酷动画效果

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,041
精华内容 3,216
关键字:

js动画效果