精华内容
下载资源
问答
  • javascript 时间框

    2010-11-19 15:20:02
    页面设计是用到的时间js等等等等等等等等等等等等等等等等等
  • JavaScript运动框架之速度时间版本

    千次阅读 2017-01-12 18:12:03
    一、JavaScript运动框架之速度版1.1 运动框架的实现思路运动,其实就是在一段时间内改变 left 、 right 、 width 、 height 、 opactiy 的值,到达目的地之后停止 位移 top,left 折叠 width,height 淡入淡出 opacity...

    原文链接 http://blog.poetries.top/2017/01/12/js-animate

    一、JavaScript运动框架之速度版


    1.1 运动框架的实现思路


    运动,其实就是在一段时间内改变 leftrightwidthheightopactiy 的值,到达目的地之后停止

    • 位移 top,left
    • 折叠 width,height
    • 淡入淡出 opacity
    • 时间有关系

      • setInterval
      • setTimeout
    • 用javascript直接获取行间样式很容易,但如果要获取非行间样式那我们只能借助函数了。我这里编写了一个名为getStyle的函数,专门处理取非行间的样式

    function getStyle(obj,attr){
        return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    }

    1.2 一些案例演示


    1.2.1 运动之速

    <div id="box"></div>
    #box {
        width: 100px;
        height: 100px;
        background: red;
         position: relative;
        left: 0;
    }
    var box = document.getElementById("box");
    var speed = 0; //步长
    var target = 600;
    var timer = null;
    timer = setInterval(function(){
        var curr = parseInt(getStyle(box,"left")); //去除getStyle(box,"left")的单位
        if(curr == target){
            clearInterval(timer);
            speed = 0;
            alert("运动结束");
        }else{
            speed +=10;
            box.style.left = speed + "px";
        }
    
    
    },1000/30);
    
    //监控left的值的变化 怎么样拿到left的值
    //alert(getComputedStyle(box)["width"]);
    //alert(box.currentStyle["left"]);
    // currentStyle --IE 
    // getComputedStyle -- 非IE
    
    function getStyle(obj,attr){
        return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    }

    在线演示

    1.2.2 运动速度之封装1

    <div id="ball"></div>
    #ball {
        width: 100px;
        height: 100px;
        background: blue;
    }
    var ball = document.getElementById("ball");
    
    ball.onmouseover = function(){
        //同时变换 用的最多
        //move(this,"width",500,10);
        //move(this,"height",500,10);
        move(ball,{"width":400,"height":300},10);
    }
    ball.onmouseout = function(){
        //move(this,"width",100,-10);
        //move(this,"height",100,-10);
        move(ball,{"width":100,"height":100},-10);
    }
    function move(obj,json,speed){
        clearInterval(obj.timer);
        var mark = true;
        obj.timer = setInterval(function(){
            for(var attr in json){
                var curr = parseInt(getStyle(obj,attr));
                var target = json[attr];
                if(curr != target){
                    obj.style[attr] = curr+speed+"px";
                    mark = false;
              }
            }
            if(mark){
                clearInterval(obj.timer);
            }
        },1000/30);
    }
    
    
    function getStyle(obj,attr){
        return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    }
    • 需要注意的地方
      • 当需要两个动画的时候,会执行后面一个,解决办法如下,回调函数
      • 当需要两个以上的时候,需要考虑是否可写一行代码变换多个属性
      • 变换不一致的时候,定时器被提前清除

    在线演示

    1.2.3 运动速度之封装2–增加opacity
    <div id="ball"></div>
    #ball {
      position: relative;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      background: blue;
      opacity: 1;
    }
    var ball = document.getElementById("ball");
    ball.onmouseover = function(){
        move(ball,{"width":300,"height":300,"opacity":0.3});
    }
    //          ball.onmouseout = function(){
    //              move(ball,{"width":100,"height":100},-10);
    //          }
    function move(obj,json){
        clearInterval(obj.timer);
        var mark = true;
        obj.timer = setInterval(function(){
            for(var attr in json){
                var curr = null;
                var target = json[attr];
                var speed = null;
                if(attr == "opacity"){
                    curr = getStyle(obj,attr)*100;
                    speed = (target*100-curr)*0.15;
                }else {
                    curr = parseInt(getStyle(obj,attr));
                    speed = (target - curr)*0.15;
                }
                speed = speed>0 ? Math.ceil(speed):Math.floor(speed);
                if(curr != target){
                    if(attr == "opacity"){
                        obj.style[attr] = (curr+speed)/100;
                    }else {
                        obj.style[attr] = curr+speed+"px";
                    }
    
                    mark = false;
              }
            }
            if(mark){
                clearInterval(obj.timer);
            }
        },1000/30);
    }
    
    
    function getStyle(obj,attr){
        return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    }

    在线演示

    • 需要注意的地方
      • 当需要两个动画的时候,会执行后面一个,解决办法如下,回调函数
      • 当需要两个以上的时候,需要考虑是否可写一行代码变换多个属性
      • 变换不一致的时候,定时器被提前清除
      • 速度speed不要写死

    1.3 运动框架之应用

    1.3.1 分享按钮
    <div id="ball"></div>
    <div id="box1">
      <div id="box2">分享到</div>
    </div>
    var box1 = document.getElementById("box1");
    var ball = document.getElementById("ball");
    
    box1.onmouseover = function(){
      move(this,"left",0,10);
    }
    box1.onmouseout = function(){
      move(this,"left",-100,-10);
    }
    //问题一:当需要两个动画的时候,会执行后面一个,解决办法如下,回调函数
    ball.onmouseover = function(){
      //同时变换 用的最多
      //move(this,"width",500,10);
      //move(this,"height",500,10);
      //列队在执行
      move(ball,"width",500,10,function(){
        move(ball,"height",500,10);
      });
    }
    ball.onmouseout = function(){
      //move(this,"width",100,-10);
      //move(this,"height",100,-10);
      move(ball,"width",100,-10,function(){
        move(ball,"height",100,-10);
      });
    }
    var timer = null;
    function move(obj,attr,target,speed,callback){
      clearInterval(timer); //obj.timer缓存到各自的obj下
      timer = setInterval(function(){
        var curr = parseInt(getStyle(obj,attr));
        if(curr == target){
          clearInterval(timer);
          callback && callback();
        }else {
          obj.style[attr] = curr+speed+"px";
        }
      },1000/30);
    }
    
    
    
    
    function getStyle(obj,attr){
      return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    }

    在线演示

    1.3.2运动框架之轮播图应用
    1.3.2.1 焦点轮播–左右-无缝-速度版实现

    <div id="box">
        <ul id="imgBox">
            <li>![](http://upload-images.jianshu.io/upload_images/1480597-c72819402fb928e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
            <li>![](http://upload-images.jianshu.io/upload_images/1480597-6830ca74fe1e6fcd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
            <li>![](http://upload-images.jianshu.io/upload_images/1480597-5d38376e63ffd0b0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
            <li>![](http://upload-images.jianshu.io/upload_images/1480597-2aa932ffbba4091e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
            <li>![](http://upload-images.jianshu.io/upload_images/1480597-c72819402fb928e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
        </ul>
        <ol id="btn">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
    <script src="http://7xq6al.com1.z0.glb.clouddn.com/Animate.min.js"></script>
    <script type="text/javascript">
        var box = document.querySelector("#box");
        var imgUl = document.querySelector("#imgBox");
        var btns = document.querySelector("#btn").querySelectorAll("li");
        var len = btns.length;
        var lenImg = imgUl.querySelectorAll("li").length;
        var index = 0; //控制img的索引
        var cindex = 0;//控制按钮的索引
        var timer = null;
    
        for (var i=0;i<len;i++) {
                (function(index){
                    btns[index].onmouseover = function(){
                        for (var j=0;j<len;j++){
                            btns[j].className = "";
                    }
                        cindex = index;//保持索引同步
                        animateSpeed(imgUl,{"left":-970*index});
                        this.className = "active";
                    }
                })(i);
        }
        function autoPlay(){
            index++;
            cindex++;
            cindex %=len;//限制长度
            for (var j=0;j<len;j++){
                btns[j].className = "";
            }
            animateSpeed(imgUl,{"left":-970*index},function(){
    
                if(index == lenImg-1){
                    this.style.left = 0;
                    index = 0;
                }
            });
            btns[cindex].className = "active";
        }
        timer = setInterval(autoPlay,2000);
        box.onmouseover = function(){
            clearInterval(timer);
        }
        box.onmouseout = function(){
            timer = setInterval(autoPlay,2000);
        }
    </script>
    
    *{
      padding: 0;
      margin: 0;
    }
    body{
      font-size: 14px;
      font-family: "微软雅黑";
    }
    ul,li{
      list-style: none;
    }
    #box {
      position: relative;
      width: 970px;
      height: 350px;
      margin: 30px auto;
      overflow: hidden;
    }
    #imgBox {
      width:1000%;/*自动计算百分比*/
      position: absolute;
      left: 0;
    }
    #imgBox li{
      width: 970px;
      height: 350px;
      float: left;
    }
    
    #imgBox li img {
      width: 970px;
      height: 350px;
    }
    #btn {
      width: 120px;
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
    #btn li {
      width: 20px;
      height: 20px;
      line-height: 20px;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      background: #fff;
      margin: 0 2px;
      float: left;
    }
    #btn li.active {
      background: #F17A5C;
      color: #fff;
    }
    
    //速度版本
    (function(win){
        function move(obj,json,callback){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var mark = true;
                for(var attr in json){
                    var cur = null;
                    if(attr == "opacity"){
                        cur = getStyle(obj,attr)*100;
                    }else{
                        //如果没写 默认填充成0
                        cur = parseInt(getStyle(obj,attr))||0;
                    }
                    var target = json[attr];
                    var speed = (target - cur)*0.2;
                    speed = speed>0?Math.ceil(speed):Math.floor(speed);
                    if(cur != target){
                        if(attr == "opacity"){
                            //IE opacity兼容问题
                            obj.style.filter = "alpha(opacity="+(cur+speed)+")";
                            obj.style[attr] = (cur + speed)/100;
                        }else{
                            obj.style[attr] = cur + speed + "px";
                        }
                        mark = false;
    
                    };
                }
                if(mark){
                    clearInterval(obj.timer);
                    callback && callback.call(obj);
                }
            },1000/30);
        }
        win.animateSpeed = move;
    })(window);
    
    
    function getStyle(obj,attr){
        return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    }
    
    function getId(id){
        return document.getElementById(id);
    }

    二、JavaScript运动框架之时间版


    2.1 关于运动


    • 速度的运动 通过速度来控制元素的 位移 / 折叠 / 淡入淡出
    • 时间的运动 通过时间来控制元素的 位移 / 折叠 / 淡入淡出(jQuery)
    • 时间的运动 基于一些数学公式 匀速运动 在路程的每一个点 速度都一样

    2.2 一些案例演示


    2.3 运动框架之时间版本-借助animate一些函数实现–综合完整版


    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
    <div id="box5"></div>
    <script type="text/javascript">
    
     //时间版本
     getId("box2").onclick = function(){
        animateTime(getId("box2"),{
            "left":500,
            "opacity":100
        },1000,"elasticOut",function(){
            this.innerHTML = "我是时间版本";
        });
     }
    getId("box3").onclick = function(){
        animateTime(getId("box3"),{
            "left":500,
            "opacity":100
        },1000,"backIn",function(){
            this.innerHTML = "我是时间版本";
        });
     }
    getId("box4").onclick = function(){
        animateTime(getId("box4"),{
            "left":500,
            "opacity":100
        },1000,"bounceIn",function(){
            this.innerHTML = "我是时间版本";
        });
     }
    getId("box5").onclick = function(){
        animateTime(getId("box5"),{
            "left":500,
            "opacity":100
        },1000,"bounceBoth",function(){
            this.innerHTML = "我是时间版本";
        });
     }
    
    
    
    </script>
    #box1,#box2,#box3,#box4,#box5 {
        position: relative;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: red;
        color: #fff;
        font-size: 12px;
        opacity: 0.5;
        filter:alpha(opcity=20);/**兼容IE*/
        margin: 10px;
    
    }
    
    /*t b c d
    t current time   :nTime-sTime
    b begining time  :curr
    c chang in value :变化量end-curr
    d duration       :持续时间 time */
    /**
    * 
    * @param {Object} obj 元素对象
    * @param {Object} json 多个属性
    * @param {Object} time 变化时间
    * @param {Object} prop 运动函数
    * @param {Object} callback 回调函数
    */
    //时间版本
    (function(win){ 
    function move(obj,json,time,prop,callback){
    //一般定时器结束后最好清除
    clearInterval(obj.timer);
    var curr = {};
    var end = {};
    //通过for in 在上车前把所有东西装到包里
    for(var attr in json){
        if(attr == "opacity"){//opacity特殊东西特殊对待
            curr[attr] = getStyle(obj,attr)*100;//化为整数好计算
        }else{
            curr[attr] = parseInt(getStyle(obj,attr))||0;
        }
        end[attr] = json[attr];
    
    }
    
    
    //如果没写默认值 默认就是0 不然在IE出问题
    //var curr = parseInt(getStyle(obj,attr))||0;
    //var end = target;
    var sTime = new Date();//开始时间T0
    //开始变换了
    obj.timer = setInterval(function(){
        var nTime = new Date();//当前时间Tt
        var t = nTime -sTime;
        var d = time;
        //St = (Tt-T0)/Time*(S-S0)+S0
        //(nTime-sTime)/time 比例最多为1
        /*var prop = (nTime-sTime)/time; */
        if(t >=d){
            t = d;
            clearInterval(obj.timer);
            callback && callback.call(obj);
        }
        for(var attr in json){
            var b = curr[attr];
            var c = end[attr] - b;
            if(attr == "opacity"){
                //var s = prop*(end[attr]-curr[attr])+curr[attr];
                var s = Tween[prop](t,b,c,d);
                obj.style[attr] = s/100;
                obj.style.filter = "alpha(opacity="+s+")";
            }else{
                //var s = prop*(end[attr]-curr[attr])+curr[attr];
                var s = Tween[prop](t,b,c,d);
                obj.style[attr] = s+"px";
            }
    
        }
    
    
    },13);
    var Tween = {
        linear: function (t, b, c, d){  //匀速
            return c*t/d + b;   //  t/d = prop;
        },
        easeIn: function(t, b, c, d){  //加速曲线
            return c*(t/=d)*t + b;
        },
        easeOut: function(t, b, c, d){  //减速曲线
            return -c *(t/=d)*(t-2) + b;
        },
        easeBoth: function(t, b, c, d){  //加速减速曲线
            if ((t/=d/2) < 1) {
                return c/2*t*t + b;
            }
            return -c/2 * ((--t)*(t-2) - 1) + b;
        },
        easeInStrong: function(t, b, c, d){  //加加速曲线
            return c*(t/=d)*t*t*t + b;
        },
        easeOutStrong: function(t, b, c, d){  //减减速曲线
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
        },
        easeBothStrong: function(t, b, c, d){  //加加速减减速曲线
            if ((t/=d/2) < 1) {
                return c/2*t*t*t*t + b;
            }
            return -c/2 * ((t-=2)*t*t*t - 2) + b;
        },
        elasticIn: function(t, b, c, d, a, p){  //正弦衰减曲线(弹动渐入)
            if (t === 0) {
                return b;
            }
            if ( (t /= d) == 1 ) {
                return b+c;
            }
            if (!p) {
                p=d*0.3;
            }
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p/4;
            } else {
                var s = p/(2*Math.PI) * Math.asin (c/a);
            }
            return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        },
        elasticOut: function(t, b, c, d, a, p){    //正弦增强曲线(弹动渐出)
            if (t === 0) {
                return b;
            }
            if ( (t /= d) == 1 ) {
                return b+c;
            }
            if (!p) {
                p=d*0.3;
            }
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else {
                var s = p/(2*Math.PI) * Math.asin (c/a);
            }
            return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
        },
        elasticBoth: function(t, b, c, d, a, p){
            if (t === 0) {
                return b;
            }
            if ( (t /= d/2) == 2 ) {
                return b+c;
            }
            if (!p) {
                p = d*(0.3*1.5);
            }
            if ( !a || a < Math.abs(c) ) {
                a = c;
                var s = p/4;
            }
            else {
                var s = p/(2*Math.PI) * Math.asin (c/a);
            }
            if (t < 1) {
                return - 0.5*(a*Math.pow(2,10*(t-=1)) *
                        Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
            }
            return a*Math.pow(2,-10*(t-=1)) *
                    Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
        },
        backIn: function(t, b, c, d, s){     //回退加速(回退渐入)
            if (typeof s == 'undefined') {
               s = 1.70158;
            }
            return c*(t/=d)*t*((s+1)*t - s) + b;
        },
        backOut: function(t, b, c, d, s){
            if (typeof s == 'undefined') {
                s = 3.70158;  //回缩的距离
            }
            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
        },
        backBoth: function(t, b, c, d, s){
            if (typeof s == 'undefined') {
                s = 1.70158;
            }
            if ((t /= d/2 ) < 1) {
                return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
            }
            return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
        },
        bounceIn: function(t, b, c, d){    //弹球减振(弹球渐出)
            return c - Tween['bounceOut'](d-t, 0, c, d) + b;
        },
        bounceOut: function(t, b, c, d){
            if ((t/=d) < (1/2.75)) {
                return c*(7.5625*t*t) + b;
            } else if (t < (2/2.75)) {
                return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
            } else if (t < (2.5/2.75)) {
                return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
            }
            return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
        },
        bounceBoth: function(t, b, c, d){
            if (t < d/2) {
                return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
            }
            return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
            }
    };
    }
    win.animateTime = move; 
    })(window);

    在线演示

    三、运动框架之时间速度版完整封装

    /*t b c d
    t current time   :nTime-sTime
    b begining time  :curr
    c chang in value :变化量end-curr
    d duration       :持续时间 time */
    /**
     * 
     * @param {Object} obj 元素对象
     * @param {Object} json 多个属性
     * @param {Object} time 变化时间
     * @param {Object} prop 运动函数
     * @param {Object} callback 回调函数
     */
    //时间版本
    (function(win){ 
        function move(obj,json,time,prop,callback){
        //一般定时器结束后最好清除
        clearInterval(obj.timer);
        var curr = {};
        var end = {};
        //通过for in 在上车前把所有东西装到包里
        for(var attr in json){
            if(attr == "opacity"){//opacity特殊东西特殊对待
                curr[attr] = getStyle(obj,attr)*100;//化为整数好计算
            }else{
                curr[attr] = parseInt(getStyle(obj,attr))||0;
            }
            end[attr] = json[attr];
    
        }
    
    
        //如果没写默认值 默认就是0 不然在IE出问题
        //var curr = parseInt(getStyle(obj,attr))||0;
        //var end = target;
        var sTime = new Date();//开始时间T0
        //开始变换了
        obj.timer = setInterval(function(){
            var nTime = new Date();//当前时间Tt
            var t = nTime -sTime;
            var d = time;
            //St = (Tt-T0)/Time*(S-S0)+S0
            //(nTime-sTime)/time 比例最多为1
            /*var prop = (nTime-sTime)/time; */
            if(t >=d){
                t = d;
                clearInterval(obj.timer);
                callback && callback.call(obj);
            }
            for(var attr in json){
                var b = curr[attr];
                var c = end[attr] - b;
                if(attr == "opacity"){
                    //var s = prop*(end[attr]-curr[attr])+curr[attr];
                    var s = Tween[prop](t,b,c,d);
                    obj.style[attr] = s/100;
                    obj.style.filter = "alpha(opacity="+s+")";
                }else{
                    //var s = prop*(end[attr]-curr[attr])+curr[attr];
                    var s = Tween[prop](t,b,c,d);
                    obj.style[attr] = s+"px";
                }
    
            }
    
    
        },13);
        var Tween = {
            linear: function (t, b, c, d){  //匀速
                return c*t/d + b;   //  t/d = prop;
            },
            easeIn: function(t, b, c, d){  //加速曲线
                return c*(t/=d)*t + b;
            },
            easeOut: function(t, b, c, d){  //减速曲线
                return -c *(t/=d)*(t-2) + b;
            },
            easeBoth: function(t, b, c, d){  //加速减速曲线
                if ((t/=d/2) < 1) {
                    return c/2*t*t + b;
                }
                return -c/2 * ((--t)*(t-2) - 1) + b;
            },
            easeInStrong: function(t, b, c, d){  //加加速曲线
                return c*(t/=d)*t*t*t + b;
            },
            easeOutStrong: function(t, b, c, d){  //减减速曲线
                return -c * ((t=t/d-1)*t*t*t - 1) + b;
            },
            easeBothStrong: function(t, b, c, d){  //加加速减减速曲线
                if ((t/=d/2) < 1) {
                    return c/2*t*t*t*t + b;
                }
                return -c/2 * ((t-=2)*t*t*t - 2) + b;
            },
            elasticIn: function(t, b, c, d, a, p){  //正弦衰减曲线(弹动渐入)
                if (t === 0) {
                    return b;
                }
                if ( (t /= d) == 1 ) {
                    return b+c;
                }
                if (!p) {
                    p=d*0.3;
                }
                if (!a || a < Math.abs(c)) {
                    a = c;
                    var s = p/4;
                } else {
                    var s = p/(2*Math.PI) * Math.asin (c/a);
                }
                return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
            },
            elasticOut: function(t, b, c, d, a, p){    //正弦增强曲线(弹动渐出)
                if (t === 0) {
                    return b;
                }
                if ( (t /= d) == 1 ) {
                    return b+c;
                }
                if (!p) {
                    p=d*0.3;
                }
                if (!a || a < Math.abs(c)) {
                    a = c;
                    var s = p / 4;
                } else {
                    var s = p/(2*Math.PI) * Math.asin (c/a);
                }
                return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
            },
            elasticBoth: function(t, b, c, d, a, p){
                if (t === 0) {
                    return b;
                }
                if ( (t /= d/2) == 2 ) {
                    return b+c;
                }
                if (!p) {
                    p = d*(0.3*1.5);
                }
                if ( !a || a < Math.abs(c) ) {
                    a = c;
                    var s = p/4;
                }
                else {
                    var s = p/(2*Math.PI) * Math.asin (c/a);
                }
                if (t < 1) {
                    return - 0.5*(a*Math.pow(2,10*(t-=1)) *
                            Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
                }
                return a*Math.pow(2,-10*(t-=1)) *
                        Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
            },
            backIn: function(t, b, c, d, s){     //回退加速(回退渐入)
                if (typeof s == 'undefined') {
                   s = 1.70158;
                }
                return c*(t/=d)*t*((s+1)*t - s) + b;
            },
            backOut: function(t, b, c, d, s){
                if (typeof s == 'undefined') {
                    s = 3.70158;  //回缩的距离
                }
                return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
            },
            backBoth: function(t, b, c, d, s){
                if (typeof s == 'undefined') {
                    s = 1.70158;
                }
                if ((t /= d/2 ) < 1) {
                    return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
                }
                return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
            },
            bounceIn: function(t, b, c, d){    //弹球减振(弹球渐出)
                return c - Tween['bounceOut'](d-t, 0, c, d) + b;
            },
            bounceOut: function(t, b, c, d){
                if ((t/=d) < (1/2.75)) {
                    return c*(7.5625*t*t) + b;
                } else if (t < (2/2.75)) {
                    return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
                } else if (t < (2.5/2.75)) {
                    return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
                }
                return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
            },
            bounceBoth: function(t, b, c, d){
                if (t < d/2) {
                    return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
                }
                return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
                }
        };
     }
        win.animateTime = move; 
     })(window);
    
    
    //速度版本
    (function(win){
        function move(obj,json,callback){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var mark = true;
                for(var attr in json){
                    var cur = null;
                    if(attr == "opacity"){
                        cur = getStyle(obj,attr)*100;
                    }else{
                        //如果没写 默认填充成0
                        cur = parseInt(getStyle(obj,attr))||0;
                    }
                    var target = json[attr];
                    var speed = (target - cur)*0.2;
                    speed = speed>0?Math.ceil(speed):Math.floor(speed);
                    if(cur != target){
                        if(attr == "opacity"){
                            //IE opacity兼容问题
                            obj.style.filter = "alpha(opacity="+(cur+speed)+")";
                            obj.style[attr] = (cur + speed)/100;
                        }else{
                            obj.style[attr] = cur + speed + "px";
                        }
                        mark = false;
    
                    };
                }
                if(mark){
                    clearInterval(obj.timer);
                    callback && callback.call(obj);
                }
            },1000/30);
        }
        win.animateSpeed = move;
    })(window);
    
    
    function getStyle(obj,attr){
        return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    }
    
    function getId(id){
        return document.getElementById(id);
    }
    展开全文
  • javaScript 脚本完成的时间选择,觉得很好看 有水印的
  • javascript 框架Roger opened the Medium app on his phone and looked for something interesting to read. He scrolled past articles about how to be more creative. He scrolled past articles about how to be...

    javascript 框架

    Roger opened the Medium app on his phone and looked for something interesting to read. He scrolled past articles about how to be more creative. He scrolled past articles about how to be a mega-successful entrepreneur. He scrolled past articles about how to write way more gooder.

    罗杰(Roger)在手机上打开了“中型”应用程序,寻找有趣的东西。 他浏览了有关如何更具创造力的文章。 他浏览了有关如何成为超级成功企业家的文章。 他浏览了有关如何更好地编写方法的文章。

    He was about to bounce over to Twitter when a headline caught his eye.

    头条新闻引起他的注意时,他即将跳到Twitter。

    Forget Angular. Forget React. Introducing Tupress, the ultimate JavaScript framework.
    忘了Angular。 忘了React。 介绍最终JavaScript框架Tupress。

    Hmm, maybe it’s time to finally learn a framework, Roger thought. He had been dabbling in JavaScript for a few months. Why not see what all the framework fuss was about? After skimming the article — which included words like “intuitive” and “flexible” and “versatile” — Roger was sold.

    嗯,也许是时候终于学习一个框架了,罗杰想。 他已经涉足JavaScript几个月了。 为什么不看所有框架大惊小怪的东西呢? 略读了这篇文章(其中包括“直觉”,“灵活”和“通用”等字眼)后,Roger被出售。

    He fired up his MacBook, Googled “Tupress tutorial” and opened the top result. The tutorial said it would teach him how to build a two-deux app. When completed, the app would accept a list of “twos” in English (2, 2, 2, 2, 2, 2) and convert it to French (le 2, le 2, le 2, le 2, le 2, le 2).

    他启动了MacBook,在Google上搜索了“ Tupress教程”,并获得了最佳成绩。 该教程说,它将教他如何构建一个两层的应用程序。 完成后,该应用将接受英语(2、2、2、2、2、2)中的“二进制”列表,并将其转换为法语(le 2,le 2,le 2,le 2,le 2,le 2)。

    Step one, the tutorial said, was to install Tupress. Well, duh. Then Roger had to install Bistup — a lightweight wrapper, whatever that meant. After that, he had to install Claster, which provided a thin unopinionated layer of utility methods and middleware. He didn’t know what that meant either, but installed it anyway.

    教程说,第一步是安装Tupress。 好吧,嗯 然后,Roger必须安装Bistup,这是一个轻量级的包装程序。 在那之后,他不得不安装Claster,它提供了实用方法和中间件的薄薄的,不受质疑的层。 他也不知道这意味着什么,但还是安装了它。

    Finally, he had to install Pirend, a real-time RESTful API micro-service layer for implementing CRUD and AJAX using JSON. That must be important, thought Roger, or it wouldn’t have all those acronyms.

    最后,他必须安装Pirend,这是一个实时RESTful API微服务层,用于使用JSON实现CRUD和AJAX。 罗杰想,这必须很重要,否则就不会有所有的缩写。

    Now that everything was installed, Roger was excited to start writing some code. But there were a few more steps before he could do that, according to the tutorial. First, he had to install Git, provision a cloud-based database, create a RESTful API server, implement API endpoints, update dependencies, and set up a component-based project structure.

    现在已经安装了所有内容,Roger很高兴开始编写一些代码。 但是根据该教程,他还需要执行一些步骤。 首先,他必须安装Git,提供基于云的数据库,创建RESTful API服务器,实现API端点,更新依赖项以及建立基于组件的项目结构。

    “Yeesh,” yeeshed Roger. That sounds awfully complicated. But I already installed a bajillion things, Roger thought. Can’t quit now.

    “是的,”罗杰瞪了一眼。 这听起来非常复杂。 但是罗杰想,我已经安装了不计其数的东西。 现在无法退出。

    Two weeks and 179 Google searches later, Roger finally figured out how to get everything set up. He opened a terminal window and typed “tupr start.” Then he opened Chrome and navigated to localhost:3000. According to the tutorial, he should have seen “Tupress works!”

    在进行了两周的179次Google搜索之后,Roger最终想出了如何设置所有内容的方法。 他打开终端窗口并输入“ tupr start”。 然后,他打开Chrome浏览器并导航到localhost:3000。 根据教程,他应该已经看过“ Tupress的作品!”

    Instead, Roger saw … nothing. A whole lot of nothing. Tupress, sadly, was not working.

    相反,罗杰什么都没看见。 一无所有。 可悲的是,Tupress无法正常工作。

    “Sigh,” sighed Roger. To figure out what had gone wrong, Roger opened the console in Chrome developer tools. “Yikes,” yiked Roger. What a bloodbath. More red than a Game of Thrones wedding.

    “叹息。”罗杰叹了口气。 为了找出问题所在,Roger在Chrome开发人员工具中打开了控制台。 “喜欢,”罗杰轻声说道。 真是洗手间 比《权力游戏》婚礼更红。

    “I just want to write a bit of code and make a simple app,” Roger thought. It shouldn’t be this hard.

    “我只想编写一些代码并制作一个简单的应用程序,” Roger想。 不应该那么难。

    Still, he didn’t quit. He cut and pasted each and every console error into Google. He discovered on Stack Overflow that the month-old tutorial used Tupress version 1.3.2, Bistup version 1.2.1, Claster version 3.7.2, and Pirend version 4.2.1.

    不过,他没有退出。 他将每个控制台错误都剪切并粘贴到Google中。 他在Stack Overflow上发现使用了一个月的教程使用了Tupress版本1.3.2,Bistup版本1.2.1,Claster版本3.7.2和Pirend版本4.2.1。

    Roger, on the other hand, had installed the latest versions of each, and they no longer played nice together. Also, Tupress 5 just came out and was completely different than Tupress 1 (there was no Tupress 2, 3 or 4).

    另一方面,罗杰(Roger)已经安装了每个的最新版本,并且它们再也不能很好地玩了。 同样,Tupress 5刚问世,与Tupress 1完全不同(没有Tupress 2、3或4)。

    On another programming forum, Roger learned that Bistup had fallen out of favor with most developers. It was not lightweight enough. Oh, and Claster wasn’t nearly as thin as promised, apparently. So a developer in Switzerland created an alternative (Focrux.js) that was much better.

    在另一个编程论坛上,Roger得知Bistup已不受大多数​​开发人员的青睐。 它不够轻巧。 哦,显然,Claster并没有承诺的那么薄。 因此,瑞士的开发人员创建了一个更好的替代方案(Focrux.js)。

    Seven weeks later, after uninstalling and reinstalling everything multiple times, reading all of Stack Overflow, watching every YouTube video on JavaScript frameworks, and reading all 13 volumes of You Don’t Know S**t about Tupress, Roger had a Chrome console free of errors.

    七个星期后,在多次卸载并重新安装所有内容之后,阅读了所有Stack Overflow的内容,观看了JavaScript框架上的每个YouTube视频,并阅读了关于Tupress的全部13卷《 You't Know the **》 ,Roger有了一个免费的Chrome控制台错误。

    “Oh yeah,” Roger oh-yeahed.

    “哦,是的。” Roger哦-是的。

    He opened a terminal window, typed tupr start and started localhost:3000, where, finally, at long last, he saw:

    他打开了一个终端窗口,键入tupr start并启动了localhost:3000 ,最后终于看到了:

    翻译自: https://www.freecodecamp.org/news/every-javascript-framework-tutorial-written-more-than-5-minutes-ago-f96642d4f05/

    javascript 框架

    展开全文
  • 一、JavaScript运动框架之速度版 1.1 运动框架的实现思路 运动,其实就是在一段时间内改变left、right、width、height、opactiy的值,到达目的地之后停止 位移top,left 折叠width,height 淡入淡出opacity...

    一、JavaScript运动框架之速度版


    1.1 运动框架的实现思路


    运动,其实就是在一段时间内改变 left 、 right 、 width 、 height 、 opactiy 的值,到达目的地之后停止

    • 位移 top,left
    • 折叠 width,height
    • 淡入淡出 opacity
    • 时间有关系
      • setInterval
      • setTimeout
    • 用javascript直接获取行间样式很容易,但如果要获取非行间样式那我们只能借助函数了。我这里编写了一个名为getStyle的函数,专门处理取非行间的样式
    1
    2
    3
    function getStyle(obj,attr){
    return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    }

    1.2 一些案例演示


    1.2.1 运动之速

    1
    <div id="box"></div>
    1
    2
    3
    4
    5
    6
    7
    #box {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    left: 0;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    var box = document.getElementById("box");
    var speed = 0; //步长
    var target = 600;
    var timer = null;
    timer = setInterval(function(){
    var curr = parseInt(getStyle(box,"left")); //去除getStyle(box,"left")的单位
    if(curr == target){
    clearInterval(timer);
    speed = 0;
    alert("运动结束");
    }else{
    speed +=10;
    box.style.left = speed + "px";
    }
     
     
    },1000/30);
     
    //监控left的值的变化 怎么样拿到left的值
    //alert(getComputedStyle(box)["width"]);
    //alert(box.currentStyle["left"]);
    // currentStyle --IE
    // getComputedStyle -- 非IE
     
    function getStyle(obj,attr){
    return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    }

    在线演示

    1.2.2 运动速度之封装1

    1
    <div id="ball"></div>
    1
    2
    3
    4
    5
    #ball {
    width: 100px;
    height: 100px;
    background: blue;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    var ball = document.getElementById("ball");
     
    ball.onmouseover = function(){
    //同时变换 用的最多
    //move(this,"width",500,10);
    //move(this,"height",500,10);
    move(ball,{"width":400,"height":300},10);
    }
    ball.onmouseout = function(){
    //move(this,"width",100,-10);
    //move(this,"height",100,-10);
    move(ball,{"width":100,"height":100},-10);
    }
    function move(obj,json,speed){
    clearInterval(obj.timer);
    var mark = true;
    obj.timer = setInterval(function(){
    for(var attr in json){
    var curr = parseInt(getStyle(obj,attr));
    var target = json[attr];
    if(curr != target){
    obj.style[attr] = curr+speed+"px";
    mark = false;
    }
    }
    if(mark){
    clearInterval(obj.timer);
    }
    },1000/30);
    }
     
     
    function getStyle(obj,attr){
    return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    }
    • 需要注意的地方
      • 当需要两个动画的时候,会执行后面一个,解决办法如下,回调函数
      • 当需要两个以上的时候,需要考虑是否可写一行代码变换多个属性
      • 变换不一致的时候,定时器被提前清除

    在线演示

    1.2.3 运动速度之封装2–增加opacity
    1
    <div id="ball"></div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    #ball {
    position: relative;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    background: blue;
    opacity: 1;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    var ball = document.getElementById("ball");
    ball.onmouseover = function(){
    move(ball,{"width":300,"height":300,"opacity":0.3});
    }
    // ball.onmouseout = function(){
    // move(ball,{"width":100,"height":100},-10);
    // }
    function move(obj,json){
    clearInterval(obj.timer);
    var mark = true;
    obj.timer = setInterval(function(){
    for(var attr in json){
    var curr = null;
    var target = json[attr];
    var speed = null;
    if(attr == "opacity"){
    curr = getStyle(obj,attr)*100;
    speed = (target*100-curr)*0.15;
    }else {
    curr = parseInt(getStyle(obj,attr));
    speed = (target - curr)*0.15;
    }
    speed = speed>0 ? Math.ceil(speed):Math.floor(speed);
    if(curr != target){
    if(attr == "opacity"){
    obj.style[attr] = (curr+speed)/100;
    }else {
    obj.style[attr] = curr+speed+"px";
    }
     
    mark = false;
    }
    }
    if(mark){
    clearInterval(obj.timer);
    }
    },1000/30);
    }
     
     
    function getStyle(obj,attr){
    return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    }

    在线演示

    • 需要注意的地方
      • 当需要两个动画的时候,会执行后面一个,解决办法如下,回调函数
      • 当需要两个以上的时候,需要考虑是否可写一行代码变换多个属性
      • 变换不一致的时候,定时器被提前清除
      • 速度speed不要写死

    1.3 运动框架之应用

    1.3.1 分享按钮
    1
    2
    3
    4
    <div id="ball"></div>
    <div id="box1">
    <div id="box2">分享到</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    var box1 = document.getElementById("box1");
    var ball = document.getElementById("ball");
     
    box1.onmouseover = function(){
    move(this,"left",0,10);
    }
    box1.onmouseout = function(){
    move(this,"left",-100,-10);
    }
    //问题一:当需要两个动画的时候,会执行后面一个,解决办法如下,回调函数
    ball.onmouseover = function(){
    //同时变换 用的最多
    //move(this,"width",500,10);
    //move(this,"height",500,10);
    //列队在执行
    move(ball,"width",500,10,function(){
    move(ball,"height",500,10);
    });
    }
    ball.onmouseout = function(){
    //move(this,"width",100,-10);
    //move(this,"height",100,-10);
    move(ball,"width",100,-10,function(){
    move(ball,"height",100,-10);
    });
    }
    var timer = null;
    function move(obj,attr,target,speed,callback){
    clearInterval(timer); //obj.timer缓存到各自的obj下
    timer = setInterval(function(){
    var curr = parseInt(getStyle(obj,attr));
    if(curr == target){
    clearInterval(timer);
    callback && callback();
    }else {
    obj.style[attr] = curr+speed+"px";
    }
    },1000/30);
    }
     
     
     
     
    function getStyle(obj,attr){
    return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    }

    在线演示

    1.3.2运动框架之轮播图应用
    1.3.2.1 焦点轮播–左右-无缝-速度版实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    <div id="box">
    <ul id="imgBox">
    <li>![](//upload-images.jianshu.io/upload_images/1480597-c72819402fb928e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
    <li>![](//upload-images.jianshu.io/upload_images/1480597-6830ca74fe1e6fcd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
    <li>![](//upload-images.jianshu.io/upload_images/1480597-5d38376e63ffd0b0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
    <li>![](//upload-images.jianshu.io/upload_images/1480597-2aa932ffbba4091e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
    <li>![](//upload-images.jianshu.io/upload_images/1480597-c72819402fb928e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
    </ul>
    <ol id="btn">
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ol>
    </div>
    <script src="http://7xq6al.com1.z0.glb.clouddn.com/Animate.min.js"></script>
    <script type="text/javascript">
    var box = document.querySelector("#box");
    var imgUl = document.querySelector("#imgBox");
    var btns = document.querySelector("#btn").querySelectorAll("li");
    var len = btns.length;
    var lenImg = imgUl.querySelectorAll("li").length;
    var index = 0; //控制img的索引
    var cindex = 0;//控制按钮的索引
    var timer = null;
     
    for (var i=0;i<len;i++) {
    (function(index){
    btns[index].onmouseover = function(){
    for (var j=0;j<len;j++){
    btns[j].className = "";
    }
    cindex = index;//保持索引同步
    animateSpeed(imgUl,{"left":-970*index});
    this.className = "active";
    }
    })(i);
    }
    function autoPlay(){
    index++;
    cindex++;
    cindex %=len;//限制长度
    for (var j=0;j<len;j++){
    btns[j].className = "";
    }
    animateSpeed(imgUl,{"left":-970*index},function(){
     
    if(index == lenImg-1){
    this.style.left = 0;
    index = 0;
    }
    });
    btns[cindex].className = "active";
    }
    timer = setInterval(autoPlay,2000);
    box.onmouseover = function(){
    clearInterval(timer);
    }
    box.onmouseout = function(){
    timer = setInterval(autoPlay,2000);
    }
    </script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    *{
    padding: 0;
    margin: 0;
    }
    body{
    font-size: 14px;
    font-family: "微软雅黑";
    }
    ul,li{
    list-style: none;
    }
    #box {
    position: relative;
    width: 970px;
    height: 350px;
    margin: 30px auto;
    overflow: hidden;
    }
    #imgBox {
    width:1000%;/*自动计算百分比*/
    position: absolute;
    left: 0;
    }
    #imgBox li{
    width: 970px;
    height: 350px;
    float: left;
    }
     
    #imgBox li img {
    width: 970px;
    height: 350px;
    }
    #btn {
    width: 120px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    }
    #btn li {
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    background: #fff;
    margin: 0 2px;
    float: left;
    }
    #btn li.active {
    background: #F17A5C;
    color: #fff;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
     
    //速度版本
    (function(win){
    function move(obj,json,callback){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
    var mark = true;
    for(var attr in json){
    var cur = null;
    if(attr == "opacity"){
    cur = getStyle(obj,attr)*100;
    }else{
    //如果没写 默认填充成0
    cur = parseInt(getStyle(obj,attr))||0;
    }
    var target = json[attr];
    var speed = (target - cur)*0.2;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);
    if(cur != target){
    if(attr == "opacity"){
    //IE opacity兼容问题
    obj.style.filter = "alpha(opacity="+(cur+speed)+")";
    obj.style[attr] = (cur + speed)/100;
    }else{
    obj.style[attr] = cur + speed + "px";
    }
    mark = false;
     
    };
    }
    if(mark){
    clearInterval(obj.timer);
    callback && callback.call(obj);
    }
    },1000/30);
    }
    win.animateSpeed = move;
    })(window);
     
     
    function getStyle(obj,attr){
    return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    }
     
    function getId(id){
    return document.getElementById(id);
    }

    二、JavaScript运动框架之时间版


    2.1 关于运动


    • 速度的运动 通过速度来控制元素的 位移 / 折叠 / 淡入淡出
    • 时间的运动 通过时间来控制元素的 位移 / 折叠 / 淡入淡出(jQuery)
    • 时间的运动 基于一些数学公式 匀速运动 在路程的每一个点 速度都一样
    2.2 一些案例演示

    2.3 运动框架之时间版本-借助animate一些函数实现–综合完整版


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
    <div id="box5"></div>
    <script type="text/javascript">
     
    //时间版本
    getId("box2").onclick = function(){
    animateTime(getId("box2"),{
    "left":500,
    "opacity":100
    },1000,"elasticOut",function(){
    this.innerHTML = "我是时间版本";
    });
    }
    getId("box3").onclick = function(){
    animateTime(getId("box3"),{
    "left":500,
    "opacity":100
    },1000,"backIn",function(){
    this.innerHTML = "我是时间版本";
    });
    }
    getId("box4").onclick = function(){
    animateTime(getId("box4"),{
    "left":500,
    "opacity":100
    },1000,"bounceIn",function(){
    this.innerHTML = "我是时间版本";
    });
    }
    getId("box5").onclick = function(){
    animateTime(getId("box5"),{
    "left":500,
    "opacity":100
    },1000,"bounceBoth",function(){
    this.innerHTML = "我是时间版本";
    });
    }
     
     
     
    </script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #box1,#box2,#box3,#box4,#box5 {
    position: relative;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: red;
    color: #fff;
    font-size: 12px;
    opacity: 0.5;
    filter:alpha(opcity=20);/**兼容IE*/
    margin: 10px;
     
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
     
    /*t b c d
    t current time :nTime-sTime
    b begining time :curr
    c chang in value :变化量end-curr
    d duration :持续时间 time */
    /**
    *
    * @param {Object} obj 元素对象
    * @param {Object} json 多个属性
    * @param {Object} time 变化时间
    * @param {Object} prop 运动函数
    * @param {Object} callback 回调函数
    */
    //时间版本
    (function(win){
    function move(obj,json,time,prop,callback){
    //一般定时器结束后最好清除
    clearInterval(obj.timer);
    var curr = {};
    var end = {};
    //通过for in 在上车前把所有东西装到包里
    for(var attr in json){
    if(attr == "opacity"){//opacity特殊东西特殊对待
    curr[attr] = getStyle(obj,attr)*100;//化为整数好计算
    }else{
    curr[attr] = parseInt(getStyle(obj,attr))||0;
    }
    end[attr] = json[attr];
     
    }
     
     
    //如果没写默认值 默认就是0 不然在IE出问题
    //var curr = parseInt(getStyle(obj,attr))||0;
    //var end = target;
    var sTime = new Date();//开始时间T0
    //开始变换了
    obj.timer = setInterval(function(){
    var nTime = new Date();//当前时间Tt
    var t = nTime -sTime;
    var d = time;
    //St = (Tt-T0)/Time*(S-S0)+S0
    //(nTime-sTime)/time 比例最多为1
    /*var prop = (nTime-sTime)/time; */
    if(t >=d){
    t = d;
    clearInterval(obj.timer);
    callback && callback.call(obj);
    }
    for(var attr in json){
    var b = curr[attr];
    var c = end[attr] - b;
    if(attr == "opacity"){
    //var s = prop*(end[attr]-curr[attr])+curr[attr];
    var s = Tween[prop](t,b,c,d);
    obj.style[attr] = s/100;
    obj.style.filter = "alpha(opacity="+s+")";
    }else{
    //var s = prop*(end[attr]-curr[attr])+curr[attr];
    var s = Tween[prop](t,b,c,d);
    obj.style[attr] = s+"px";
    }
     
    }
     
     
    },13);
    var Tween = {
    linear: function (t, b, c, d){ //匀速
    return c*t/d + b; // t/d = prop;
    },
    easeIn: function(t, b, c, d){ //加速曲线
    return c*(t/=d)*t + b;
    },
    easeOut: function(t, b, c, d){ //减速曲线
    return -c *(t/=d)*(t-2) + b;
    },
    easeBoth: function(t, b, c, d){ //加速减速曲线
    if ((t/=d/2) < 1) {
    return c/2*t*t + b;
    }
    return -c/2 * ((--t)*(t-2) - 1) + b;
    },
    easeInStrong: function(t, b, c, d){ //加加速曲线
    return c*(t/=d)*t*t*t + b;
    },
    easeOutStrong: function(t, b, c, d){ //减减速曲线
    return -c * ((t=t/d-1)*t*t*t - 1) + b;
    },
    easeBothStrong: function(t, b, c, d){ //加加速减减速曲线
    if ((t/=d/2) < 1) {
    return c/2*t*t*t*t + b;
    }
    return -c/2 * ((t-=2)*t*t*t - 2) + b;
    },
    elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线(弹动渐入)
    if (t === 0) {
    return b;
    }
    if ( (t /= d) == 1 ) {
    return b+c;
    }
    if (!p) {
    p=d*0.3;
    }
    if (!a || a < Math.abs(c)) {
    a = c;
    var s = p/4;
    } else {
    var s = p/(2*Math.PI) * Math.asin (c/a);
    }
    return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    },
    elasticOut: function(t, b, c, d, a, p){ //正弦增强曲线(弹动渐出)
    if (t === 0) {
    return b;
    }
    if ( (t /= d) == 1 ) {
    return b+c;
    }
    if (!p) {
    p=d*0.3;
    }
    if (!a || a < Math.abs(c)) {
    a = c;
    var s = p / 4;
    } else {
    var s = p/(2*Math.PI) * Math.asin (c/a);
    }
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    },
    elasticBoth: function(t, b, c, d, a, p){
    if (t === 0) {
    return b;
    }
    if ( (t /= d/2) == 2 ) {
    return b+c;
    }
    if (!p) {
    p = d*(0.3*1.5);
    }
    if ( !a || a < Math.abs(c) ) {
    a = c;
    var s = p/4;
    }
    else {
    var s = p/(2*Math.PI) * Math.asin (c/a);
    }
    if (t < 1) {
    return - 0.5*(a*Math.pow(2,10*(t-=1)) *
    Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    }
    return a*Math.pow(2,-10*(t-=1)) *
    Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
    },
    backIn: function(t, b, c, d, s){ //回退加速(回退渐入)
    if (typeof s == 'undefined') {
    s = 1.70158;
    }
    return c*(t/=d)*t*((s+1)*t - s) + b;
    },
    backOut: function(t, b, c, d, s){
    if (typeof s == 'undefined') {
    s = 3.70158; //回缩的距离
    }
    return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    },
    backBoth: function(t, b, c, d, s){
    if (typeof s == 'undefined') {
    s = 1.70158;
    }
    if ((t /= d/2 ) < 1) {
    return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    }
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    },
    bounceIn: function(t, b, c, d){ //弹球减振(弹球渐出)
    return c - Tween['bounceOut'](d-t, 0, c, d) + b;
    },
    bounceOut: function(t, b, c, d){
    if ((t/=d) < (1/2.75)) {
    return c*(7.5625*t*t) + b;
    } else if (t < (2/2.75)) {
    return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
    } else if (t < (2.5/2.75)) {
    return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
    }
    return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
    },
    bounceBoth: function(t, b, c, d){
    if (t < d/2) {
    return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
    }
    return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
    }
    };
    }
    win.animateTime = move;
    })(window);

    在线演示

    三、运动框架之时间速度版完整封装

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    /*t b c d
    t current time :nTime-sTime
    b begining time :curr
    c chang in value :变化量end-curr
    d duration :持续时间 time */
    /**
    *
    * @param {Object} obj 元素对象
    * @param {Object} json 多个属性
    * @param {Object} time 变化时间
    * @param {Object} prop 运动函数
    * @param {Object} callback 回调函数
    */
    //时间版本
    (function(win){
    function move(obj,json,time,prop,callback){
    //一般定时器结束后最好清除
    clearInterval(obj.timer);
    var curr = {};
    var end = {};
    //通过for in 在上车前把所有东西装到包里
    for(var attr in json){
    if(attr == "opacity"){//opacity特殊东西特殊对待
    curr[attr] = getStyle(obj,attr)*100;//化为整数好计算
    }else{
    curr[attr] = parseInt(getStyle(obj,attr))||0;
    }
    end[attr] = json[attr];
     
    }
     
     
    //如果没写默认值 默认就是0 不然在IE出问题
    //var curr = parseInt(getStyle(obj,attr))||0;
    //var end = target;
    var sTime = new Date();//开始时间T0
    //开始变换了
    obj.timer = setInterval(function(){
    var nTime = new Date();//当前时间Tt
    var t = nTime -sTime;
    var d = time;
    //St = (Tt-T0)/Time*(S-S0)+S0
    //(nTime-sTime)/time 比例最多为1
    /*var prop = (nTime-sTime)/time; */
    if(t >=d){
    t = d;
    clearInterval(obj.timer);
    callback && callback.call(obj);
    }
    for(var attr in json){
    var b = curr[attr];
    var c = end[attr] - b;
    if(attr == "opacity"){
    //var s = prop*(end[attr]-curr[attr])+curr[attr];
    var s = Tween[prop](t,b,c,d);
    obj.style[attr] = s/100;
    obj.style.filter = "alpha(opacity="+s+")";
    }else{
    //var s = prop*(end[attr]-curr[attr])+curr[attr];
    var s = Tween[prop](t,b,c,d);
    obj.style[attr] = s+"px";
    }
     
    }
     
     
    },13);
    var Tween = {
    linear: function (t, b, c, d){ //匀速
    return c*t/d + b; // t/d = prop;
    },
    easeIn: function(t, b, c, d){ //加速曲线
    return c*(t/=d)*t + b;
    },
    easeOut: function(t, b, c, d){ //减速曲线
    return -c *(t/=d)*(t-2) + b;
    },
    easeBoth: function(t, b, c, d){ //加速减速曲线
    if ((t/=d/2) < 1) {
    return c/2*t*t + b;
    }
    return -c/2 * ((--t)*(t-2) - 1) + b;
    },
    easeInStrong: function(t, b, c, d){ //加加速曲线
    return c*(t/=d)*t*t*t + b;
    },
    easeOutStrong: function(t, b, c, d){ //减减速曲线
    return -c * ((t=t/d-1)*t*t*t - 1) + b;
    },
    easeBothStrong: function(t, b, c, d){ //加加速减减速曲线
    if ((t/=d/2) < 1) {
    return c/2*t*t*t*t + b;
    }
    return -c/2 * ((t-=2)*t*t*t - 2) + b;
    },
    elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线(弹动渐入)
    if (t === 0) {
    return b;
    }
    if ( (t /= d) == 1 ) {
    return b+c;
    }
    if (!p) {
    p=d*0.3;
    }
    if (!a || a < Math.abs(c)) {
    a = c;
    var s = p/4;
    } else {
    var s = p/(2*Math.PI) * Math.asin (c/a);
    }
    return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    },
    elasticOut: function(t, b, c, d, a, p){ //正弦增强曲线(弹动渐出)
    if (t === 0) {
    return b;
    }
    if ( (t /= d) == 1 ) {
    return b+c;
    }
    if (!p) {
    p=d*0.3;
    }
    if (!a || a < Math.abs(c)) {
    a = c;
    var s = p / 4;
    } else {
    var s = p/(2*Math.PI) * Math.asin (c/a);
    }
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    },
    elasticBoth: function(t, b, c, d, a, p){
    if (t === 0) {
    return b;
    }
    if ( (t /= d/2) == 2 ) {
    return b+c;
    }
    if (!p) {
    p = d*(0.3*1.5);
    }
    if ( !a || a < Math.abs(c) ) {
    a = c;
    var s = p/4;
    }
    else {
    var s = p/(2*Math.PI) * Math.asin (c/a);
    }
    if (t < 1) {
    return - 0.5*(a*Math.pow(2,10*(t-=1)) *
    Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    }
    return a*Math.pow(2,-10*(t-=1)) *
    Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
    },
    backIn: function(t, b, c, d, s){ //回退加速(回退渐入)
    if (typeof s == 'undefined') {
    s = 1.70158;
    }
    return c*(t/=d)*t*((s+1)*t - s) + b;
    },
    backOut: function(t, b, c, d, s){
    if (typeof s == 'undefined') {
    s = 3.70158; //回缩的距离
    }
    return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    },
    backBoth: function(t, b, c, d, s){
    if (typeof s == 'undefined') {
    s = 1.70158;
    }
    if ((t /= d/2 ) < 1) {
    return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    }
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    },
    bounceIn: function(t, b, c, d){ //弹球减振(弹球渐出)
    return c - Tween['bounceOut'](d-t, 0, c, d) + b;
    },
    bounceOut: function(t, b, c, d){
    if ((t/=d) < (1/2.75)) {
    return c*(7.5625*t*t) + b;
    } else if (t < (2/2.75)) {
    return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
    } else if (t < (2.5/2.75)) {
    return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
    }
    return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
    },
    bounceBoth: function(t, b, c, d){
    if (t < d/2) {
    return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
    }
    return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
    }
    };
    }
    win.animateTime = move;
    })(window);
     
     
    //速度版本
    (function(win){
    function move(obj,json,callback){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
    var mark = true;
    for(var attr in json){
    var cur = null;
    if(attr == "opacity"){
    cur = getStyle(obj,attr)*100;
    }else{
    //如果没写 默认填充成0
    cur = parseInt(getStyle(obj,attr))||0;
    }
    var target = json[attr];
    var speed = (target - cur)*0.2;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);
    if(cur != target){
    if(attr == "opacity"){
    //IE opacity兼容问题
    obj.style.filter = "alpha(opacity="+(cur+speed)+")";
    obj.style[attr] = (cur + speed)/100;
    }else{
    obj.style[attr] = cur + speed + "px";
    }
    mark = false;
     
    };
    }
    if(mark){
    clearInterval(obj.timer);
    callback && callback.call(obj);
    }
    },1000/30);
    }
    win.animateSpeed = move;
    })(window);
     
     
    function getStyle(obj,attr){
    return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    }
     
    function getId(id){
    return document.getElementById(id);
    }

     

    from:http://blog.poetries.top/2017/01/12/js-animate/?utm_source=tuicool&utm_medium=referral

    转载于:https://www.cnblogs.com/neil080320/p/6279268.html

    展开全文
  • javascript验证框架

    2009-09-08 16:22:53
    javascript验证框架: function validateForm() { var siteVld = new vld.Validation(); siteVld.addValidObj("latData.title",'标题','Mandatory',VCC.checkMandatory); siteVld.addValidObj("latData.url",'URL'...
  • } // 运动对象、目标位置大小、运动函数、运动时间、回调 function animate(obj, json, fx, times, callback) { var iCur = {}; for(var attr in json) { if(attr == 'opacity') { iCur[attr] = Math.ceil(getStyle...

    js部分

    
     var timer = null;
     var div = document.getElementsByTagName("div");
     function getStyle(obj, style) {
         if(window.getComputedStyle) {
             return window.getComputedStyle(obj,null)[style];
         }else {
             return obj.currentStyle[style];
         }
     }
     var targetObj = {
         width: 400,
         height: 400,
         opacity: 30,
         top: 400,
         left: 400
     }
     div[0].onmouseenter = function() {
         animate(this, targetObj, 'easeOut', 500, function() {
             animate(div[1], targetObj, 'easeOut', 500)
         });
     }
     function now() {
         return (new Date()).getTime();
     }
     // 运动对象、目标位置大小、运动函数、运动时间、回调
     function animate(obj, json, fx, times, callback) {
         var iCur = {};
         for(var attr in json) {
             if(attr == 'opacity') {
                 iCur[attr] = Math.ceil(getStyle(obj,attr) * 100);
             }else {
                 iCur[attr] = parseInt(getStyle(obj,attr));
             }
         }
         var startTime = now();
         clearInterval(obj.timer);
         obj.timer = setInterval(function(){
             var changeTime = now();
             var t = times - Math.max(0,startTime - changeTime + times);
             for(var attr in json) {
                 var value = Tween[fx](t,iCur[attr],json[attr] - iCur[attr],times);                    
                 if(attr == 'opacity') {
                     obj.style.opacity = value / 100;
                 }else {
                     obj.style[attr] = value + 'px';
                 }
             }
             if(t == times) {
                 console.log(1)
                 clearInterval(obj.timer);
                 typeof callback == 'function' ? callback() : '';
             }
         },16)
     }
    
     // function startMove(obj, json, fx, times, callback) {
     //     clearInterval(obj.timer);
     //     var speed , cur;
     //     obj.timer = setInterval(function(){
     //         var stop = true;                
     //         for(var prop in json) {
     //             if(prop == "opacity") {
     //                 cur = parseFloat( getStyle(obj, prop) ) * 100;
     //             }else {
     //                 cur = parseInt( getStyle(obj, prop) );
     //             }
     //             speed = (json[prop] - cur) / 7;
     //             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
     //             if(prop == "opacity") {
     //                 obj.style.opacity = (cur + speed) / 100;
     //             }else {
     //                 obj.style[prop] = (cur + speed) + "px";
     //             }
     //             if(cur != json[prop]) {
     //                 stop = false;
     //             }
     //         }
     //         if(stop) {
     //             clearInterval(obj.timer);
     //             typeof callback == "function" ? callback() : "";
     //         }
     //     },20)
     // }
     // div[0].onmouseenter = function() {
     //     startMove(this, targetObj, function() {
     //         startMove(div[1], targetObj)
     //     });
     // }
    
     var Tween = {
         linear : function(t,b,c,d) {   //匀速
             return c * t / d + b;
         },
         easeIn : function(t,b,c,d) {   //加速
             return c * (t /= d) * t + b;
         },
         easeOut : function(t,b,c,d) {  //减速
             return -c * (t /= d) * (t - 2) + b;
         },
         easeBoth : function(t,b,c,d) { //加速减速
             if((t /= d / 2) < 1) {
                 return c / 2 * t * t + b;
             }
             return -c / 2 * ((--t) * (t - 2) - 1) + b;
         },
         easeInStrong : function(t,b,c,d) {  //加加速
             return c * (t /= d) * t * t * t + b;
         }
     }
    

    html、css部分

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            /* div {
                width: 100px;
                height: 100px;
                background-color: orange;
                /* position: absolute; */
                /* margin-bottom: 50px;
                border: 1px solid #000; */
                /* top: 0;
                left: 0; */
            /* } */ 
            .top {
                width: 100px;
                height: 100px;
                opacity: 1;
                background: orangered;
                position: absolute;
                top: 0;
                left: 0;
            }
            .bottom {
                position: absolute;
                width: 100px;
                height: 100px;
                background: orangered;
                opacity: 1;
                top: 300px;
                left: 0;
            }
        </style>
    </head>
    <body>
        <!-- <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div> -->
        <div class="top"></div>
        <div class="bottom"></div>
    </body>
    </html>
    
    
    展开全文
  • JavaScript实现城市联动框时间的联动: 要求: 年份:1900~今年 月份:1~12 日:根据每月算出对应的天数 代码: function showCity(){ //维护一个二维数组存储省份对应的城市 var citys = [[]...
  • JavaScript MVC 框架比较

    千次阅读 2014-12-12 18:46:21
    Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember.js胜出。 此次比较针对的特性标准有四种,分别是...
  • Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember.js胜出。 此次比较针对的特性标准有四种,分别是:...
  • 20款最好的JavaScript开发框架

    千次阅读 2017-05-02 09:20:11
    JavaScript语言有多种方式,创建交互式网站,Web应用程序。...它是通过使用JavaScript代码同这些JavaScript框架写的而不是写单独成为更多障碍,并期待更多的时间每次代码的同一行的Web应用程序的开发更容易。 Jav
  • 在写work-in-progress JavaScript book一书时,对于javascript继承体系,我花费了相当的时间,并在该过程中研究了各种不同的模拟经典类继承的方案。这些技术方案中,我最为推崇的是base2与Prototype的实现。 从这些...
  • 详细解释 :展示时间,默认情况为一直展示不关闭,单位毫秒, 7 content: 属性名称:内容, 默认值 : 'This is a jquery plugin power by ariesjia!'; 详细解释 :支持函数 与 字符串 ,可以使用AJAX载入等 8 ...
  • javascript跳出框架

    千次阅读 2007-07-17 17:20:00
    具体是: 设置好session的最大活动时间后,当用户没有动作的时间超过设置的最大活动时间后,系统将要求用户重新登录. 但是由于整个系统的页面是通过frame来实现的,因此,当跳转到重新凳录页面的时候,需要是重新凳录页面...
  • Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结 了每种框架的优缺点,最终的结果是,Ember.js 胜出。 此次比较针对的特性标准有四种,分别...
  • Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember.js胜出。 此次比较针对的特性标准有四种,分别是: ...
  • JavaScript框架LMLJS.zip

    2019-07-19 12:38:24
    LMLJS 是一款可爱滴 JavaScript 框架,为更少的等待而生! 内置 Deferred 对象,实现网页图片可视区域加载,异步加载 Js 等静态资源,异步加载 HTML 中 Iframe,异步加载 CSS 样式中图片,让网页以最快的速度 ...
  • 10 个优秀的JavaScript开发框架

    千次阅读 2015-03-28 10:38:46
    优秀实用的Javascript开发框架, 1、好框架作为一个软件开发的应用程序,能减少工作的时间,可以减少费用, 2、可以让web开发人员快速创建web设计和开发动态网站, 3、在性能上和体验上都有很大的提升,
  • 实现原理:加载index.htm时候,每隔1秒钟自动调用脚本刷新框架页面代码代码优点:只需要设置index.html框架页面中的脚本,调用加载的子页面中不需要设置任何代码。index.htm代码如下:首页...if (iframe != nu...
  • Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember.js胜出。 此次比较针对的特性标准有四种,分别是:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,493
精华内容 1,397
关键字:

javascript时间框

java 订阅