运动框架

作者: 致自己_cb38 | 来源:发表于2018-11-18 11:27 被阅读0次

1、querySelector: 类似于getElementById。

获取出来的元素只有一个，是第一个符合条件的标签。
传入的参数可以是类，id以及标签名。但其实是所有符合css选择器的参数都是可以的。
querySelectorAll 获取一组元素。
定位父级：一个元素向外寻找，遇到的第一个使用定位的父级，就是他的定位父级。（绝对定位相对定位固定定位）如果没有定位父级的话，他的定位父级认为是body。

2、document.all 获取页面所有元素的集合。在IE返回的是true，其他浏览器返回的是false。

3、三大系列：

offset系列
- offsetLeft :元素距离自己定位父级左边框之间的距离。影响这个值的因素有定位以及自身的margin。
- offsetTop：元素距离自己定位父级上边框之间的距离。影响这个值的因素有定位以及自身的margin。
- offsetWidth:元素占用空间的大小。包括自己的边框以及内容宽度以及padding，设置速度时应考虑border。 width + border*2 + padding*2
- offsetHeight:元素占用空间的大小。包括自己的边框以及内容高度以及padding。 height + border*2 + padding*2
- offsetParent:获取元素的定位父级。
client系列
- clientHeight | clientWidth
  可视区域的大小，包括元素的本身的宽高以及他的padding。
- 兼容的获取所有浏览器的可视区域
  eg:

window.innerHeight ||    高级浏览器
document.documentElement.clientHeight ||  IE
document.body.clientHeight   低版本的Chrome

clientTop | clientLeft上边框或者左边框的宽度
on+resize 窗口大小改变的事件,窗口大小改变的时候就会自动触发。
scroll系列
- scrollWidth | scrollHeight
- onscroll窗口发生滑动的时候自动触发的事件
- scrollTop | scrollLeft
  兼容窗口滑动过的距离
  eg:

window.pageYOffset ||    高级浏览
document.documentElement.scrollTop ||   IE
document.body.scrollTop;   Chrome低级版本

document.body 获取页面的body
document.documentElement 获取页面的HTML元素

4、缓冲运动：可以根据距离目标点的位置修改速度。距离目标越近速度越小。

缓冲运动的速度要进行取整。正值向上取整，负值向下取整。
缓冲运动的停止条件判断是一个严格的值相等。
eg:

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

缓冲运动的边界

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width:200px;
            height:200px;
            background: blue;
            position: absolute;
            left:600px;
        }
        span{
            display: block;
            width:1px;
            height:400px;
            background: black;
            position: absolute;
        }
        span#pre{
            left:400px;
        }
        span#next{
            left:600px;
        }
    </style>
</head>
<body>
<div></div>
<span id="pre"></span>
<span id="next"></span>
<script>
    var div = document.querySelector('div');
    var timer;
    var speed = 10;
    div.onmouseenter = function(){
        clearInterval(timer);
        timer = setInterval(move,30);
    };
    div.ommouseleave = function(){
        clearInterval(timer);
        timer = setInterval(move,30);
    };
    function move(){
        //目标值
        var dest = 400-div.offsetLeft;
        //判断目标位置的边界值（修正速度）
        speed = dest>=0?Math.ceil(dest/10):Math.floor(dest/10);
        //判断停止
        if(div.offsetLeft==400){
            clearInterval(timer);
            return;
        }
        div.style.left = div.offsetLeft + speed + 'px';
    }
</script>
</body>
</html>

5、匀速运动的停止条件判断是一个范围。当结束位置距离目标位置的足够近（小于一次运动的距离）的时候就认为已经达到目标位置了。这个时候就可以清除定时器，然后将元素直接设置为目标位置。

eg:

var dest = 400-div.offsetLeft;
speed = dest>=0?7:-7;
Math.abs(div.offsetLeft-400)<Math.abs(speed)

匀速运动的边界

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width:200px;
            height:200px;
            background: blue;
            position: absolute;
            left:0;
        }
        span{
            display: block;
            width:1px;
            height:400px;
            background: black;
            position: absolute;
        }
        span#pre{
            left:400px;
        }
        span#next{
            left:600px;
        }
    </style>
</head>
<body>
<div></div>
<span id="pre"></span>
<span id="next"></span>
<script>
    var div = document.querySelector('div');
    var timer;
    var speed = 7;
    div.onmouseenter = function(){
        clearInterval(timer);
        timer = setInterval(move,30);
    };
    div.ommouseleave = function(){
        clearInterval(timer);
        timer = setInterval(move,30);
    };
    function move(){
        var dest = 400-div.offsetLeft;
        speed = dest>=0?7:-7;
        // 判断匀速运动停止时要使用范围值，div.offsetLeft-400无限接近speed
        if(Math.abs(div.offsetLeft-400)<Math.abs(speed)){
            clearInterval(timer);
            div.style.left = '400px';
            return;
        }
        div.style.left = div.offsetLeft + speed + 'px';
    }
</script>
</body>
</html>

6、json

json：json是js对象的字符串表达。
json数据的要求非常严格：
键与值必须是使用双引号。
键必须使用双引号。
值只能是数字，字符串，布尔值，数组，json。

7、透明度：

opacity:0.3;   //ff chrom 高级浏览器
filter:alpha(opacity=30); //IE

设置透明度的兼容性：
- 获取行间样式：

    obj.style.属性
    obj.style[属性]

获取非行间样式：（具有兼容性）

    getComputedStyle(obj,null)[属性] // chrome
    obj.currentStyle(属性)        //IE

兼容框架

function getStyle(obj,style){
    if(obj.currentStyle){
        return obj.currentStyle[style];
    }else{
        return getComputedStyle(obj,null)[style];
    }
}

案例

侧边栏移入移出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width:150px;
            height:300px;
            background: red;
            position: relative;
            top:100px;
            left:-150px;
        }
        span{
            display: block;
            width:50px;
            height:100px;
            position: absolute;
            top:100px;
            left:150px;
            background: blue;
        }
    </style>
</head>
<body>
<div>
    <span></span>
</div>
<script>
var div = document.querySelector('div');
var timer = null;
var speed = 10;
div.onmouseover = function(){
    move(10,0);
};
div.onmouseout = function(){
    move(-10,-150);
};
//速度 目标值
function move(speed,dest){
    clearInterval(timer);
    timer = setInterval(function(){
//元素距离自己定位父级左边框之间的距离和目标值相等时停止定时器
        if(div.offsetLeft==dest){
            clearInterval(timer);
            return;
        }
        div.style.left = div.offsetLeft + speed + 'px';
    },30);
}
</script>
</body>
</html>

侧边栏滑动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            height:2000px;
        }
        div{
            width:150px;
            height:300px;
            background: red;
            position: absolute;
            top:200px;
            right:0px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
<script>
var div = document.querySelector('div');
var timer;
//鼠标滑动事件
window.onscroll = function(){
    //获取滑动过的距离(兼容)
    var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    //获取当前浏览器窗口的大小(兼容)
    var clientHeight = window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
    //计算目标位置
    var dest = Math.round((clientHeight-div.offsetHeight)/2 + top);
    var speed = 1;
    clearInterval(timer);
    timer = setInterval(function(){
        //修正速度
        if( dest<div.offsetTop){
            speed = -1*Math.abs(speed);
        }else{
            speed = Math.abs(speed);
        }
        //判断停止
        if(dest==div.offsetTop){
            clearInterval(timer);
            return;
        }
        div.style.top = div.offsetTop+speed+ 'px';
    },30);
};
</script>
</html>

设置透明度过度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            background: red;
            opacity:0.3;
            filter: alpha(opacity=30);
        }
    </style>
</head>
<body>
    <div></div>
</body>
<script>
    var div = document.querySelector('div');
    var timer;
    var speed = 1;
    div.onmouseenter = function(){
        clearInterval(timer);
        timer = setInterval(function(){
            // 获取当前透明的
            var opacity = getStyle(div,'opacity')*100;
            if(opacity>=100){
                clearInterval(timer);
            }
            change(div,opacity+speed);
        },30);
    };
    div.onmouseleave = function(){
        clearInterval(timer);
        timer = setInterval(function(){
            // opacity的值带px(字符串)
            var opacity = parseInt(getStyle(div,'opacity')*100);
            if(opacity<=30){
                clearInterval(timer);
            }
            change(div,opacity-speed);
        },30);
    };
    //兼容透明度
    function change(obj,dest){
        obj.style.filter = 'alpha(opacity='+dest+')'; //IE
        obj.style.opacity = dest/100; //chrome
    }
    //兼容非行间样式
    function getStyle(obj,style){
        if(obj.currentStyle){
            return obj.currentStyle[style]; //IE
        }else{
            return getComputedStyle(obj,null)[style]; //chrome
        }
    }
</script>
</html>

多物体运动(纵向匀速运动)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        div{
            width:50px;
            height:200px;
            background: red;
            margin:20px;
            float: left;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
    var div = document.querySelectorAll('div');
    for(var i=0;i<div.length;i++){
        div[i].timer = null;
        div[i].onmouseenter = function(){
            move(this,400);
        };
        div[i].onmouseleave = function(){
            move(this,200);
        };
    }
    function move(obj,dest){
        //修正速度
        var speed = dest==400?10:-10;
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            //判断停止
            if(parseInt(obj.style.height)==dest){
                clearInterval(obj.timer);
                return false;
            }
            obj.style.height = parseInt(getStyle(obj,'height'))+speed +'px';
        },30);
    }
    //兼容非行间样式
    function getStyle(obj,style){
            if(obj.currentStyle){
                return obj.currentStyle[style];
            }else{
                return getComputedStyle(obj,null)[style];
            }
        }
</script>
</body>
</html>

多物体运动（横向缓冲运动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        div{
            width:50px;
            height:50px;
            position: relative;
            background: blue;
            margin-top:20px;
        }
        span#next{
            display: block;
            width:1px;
            height:400px;
            background: black;
            position: absolute;
            left:400px;
            top:-140px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <span id="next"></span>
</body>
<script>
var div = document.querySelectorAll('div');
for(var i=0;i<div.length;i++){
    div[i].timer = null;
    div[i].onmouseenter = function(){
        startMove(this,400);
    };
    div[i].onmouseleave = function(){
        startMove(this,50);
    };
}
function startMove(obj,dest){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        //修正速度（目标值等于400，宽增大，反之宽变小）
        var speed = dest==400?Math.ceil((400-obj.offsetWidth)/10):Math.floor(-1*(obj.offsetWidth-50)/10);
        if(obj.offsetWidth==dest){
                clearInterval(obj.timer);
                return;
            }
            obj.style.width = obj.offsetWidth+speed+'px';
    },30);
}
</script>
</html>

同时改变多个属性（链式运动）

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width:100px;
            height:100px;
            background: yellow;
            position: relative;
            margin-top:30px;
            opacity: 0.3;
            filter: alpha(opacity=30);
            border:1px solid #000;
        }
    </style>
</head>
<body>
<div>变高</div>
</body>
<script>
var div = document.querySelector('div');
div.timer = null;
div.onmouseenter = function(){
    var obj = this;
    startMove(this,{"height":"100","width":"300"},function(){
        startMove(obj,{'width':"200"});
    })
};
function startMove(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var m = 0;
        var j = 0;
        for(var n in json){
            //{"width"：300，"height":300}
            //属性名
            var attr = n;
            //目标值
            var dest = json[n];
            if(attr=='opacity'){
                //当前的样式值
                var nowStyle = getStyle(obj,attr);
                nowStyle = Math.round(nowStyle*100);
            }else{
                var nowStyle = parseInt(getStyle(obj,attr));
            }
            //调整速度，这个是缓冲速度。
            var speed = dest>=nowStyle?Math.ceil((dest-nowStyle)/10):Math.floor((dest-nowStyle)/10);
            //当前值是否等于目标
            if(nowStyle==dest){
                //有多少个到达目标的属性
                j++;
            }else{
                if('opacity'==attr){
                    obj.style.opacity = (nowStyle+speed)/100;
                    obj.style.filter = 'alpha(opacity='+nowStyle+speed+')';
                }else{
                    obj.style[attr] = nowStyle+speed+'px';
                }
            }
            //json的元素个数
             m++;
        }
        //传入的数量与遍历的数量相等清除定时器，使用回调函数
        if(j==m){
            clearInterval(obj.timer);
            if(fn)fn();
        }
    },30);
}
function getStyle(obj,style){
    if(obj.currentStyle){
        return obj.currentStyle[style];
    }else{
        return getComputedStyle(obj,null)[style];
    }
}
</script>
</html>

仿FLASH的图片轮换播放器

// 1、获取元素
    //遮罩，方便显示左右按钮
    var mark_left = $('.mark_left');
    var mark_right = $('.mark_right');
    //左右按钮
    var prev = $('.prev');
    var next = $('.next');
    //大图的
    var big_pic = $('.big_pic');
    var big_li = $('.big_pic').getElementsByTagName('li');
    //小图的
    var small_pic = $('.small_pic');
    var small_ul = small_pic.getElementsByTagName('ul')[0];
    var small_li = $('.small_pic').getElementsByTagName('li');
    //控制显示第几张图片
    var now = 0;
    //控制图片的层级
    var Zindex = 1;
// 2、设置定时器
    var timer = setInterval(function(){
        now++;
        tab();
    },2000);
    function $(selector){
        return document.querySelector(selector);
    }
// 3、进行转换
function tab(){
    // 小图右移动
        if (now == small_li.length) {
            now = 0;
            small_ul.style.left = '0';
            // 小图左移动
        }else if (now == -1) {
            now = small_li.length-1;
            var left = -1*(parseInt(small_li[0].offsetWidth))*(small_li.length-3);
            small_ul.style.left = left+'px';
            // 小图正常移动
        }else if (now>0 && now<small_li.length-1) {
            var left = -1*(parseInt(small_li[0].offsetWidth))*(now-1);
            small_ul.style.left = left+'px';
        }
        // 改变所有小图透明度
        for (var i = 0; i < small_li.length; i++) {
            small_li[i].style.opacity = '0.6';
            small_li[i].style.filter =' alpha(opacity = 60)';
        }
        // 当前大图显示
        startMove(small_li[now],{"opacity":100});
        // 改变大图层级
        big_li[now].style.zIndex = ++Zindex;
        // 大图的当前图高变0后慢慢加载当前图
        big_li[now].style.height = '0';
        startMove(big_li[now],{"height":320});
    }
// 4、点击按钮的效果
    prev.onmouseenter = mark_left.onmouseenter = function(){
        startMove(prev,{"opacity":100});
    };
    mark_left.onmouseleave = function(){
        startMove(prev,{"opacity":0});
    };
    next.onmouseenter = mark_right.onmouseenter = function(){
        startMove(next,{"opacity":100});
    };
    mark_right.onmouseleave = function(){
        startMove(next,{"opacity":0});
    };
    // 右运动
    next.onclick = function(){
        now++;
        tab();
    };
    // 左运动
    prev.onclick = function(){
        now--;
        tab();
    };
// 5、大图进入，暂停定时器
    big_pic.onmouseenter = function(){
        clearInterval(timer);
    };
// 6、大图移除，图片移动
    big_pic.onmouseleave = function(){
        timer = setInterval(function(){
            now++;
            tab();
        },2000);
    };
// 7、点击每张小图停止再运动
    for (var m = 0; m < small_li.length; m++) {
        small_li[m].index = m;
        small_li[m].onclick = function(){
            clearInterval(timer);
            now = this.index;
            tab();
            timer = setInterval(function(){
                now++;
                tab();
            },2000);
        };
    }

土豆右下角菜单悬浮效果

var zns_bottom = document.getElementById('zns_bottom');
var zns_box = document.getElementById('zns_box');
var btn_close = document.getElementById('btn_close');
var but = document.getElementById('but');
but.onclick = function(){
    startMove(zns_bottom,{"right":0},function(){
        zns_box.style.display = 'block';
        startMove(zns_box,{'bottom':0});
    })
};
btn_close.onclick = function(){
    startMove(zns_box,{"bottom":-315},function(){
        zns_box.style.display = 'none';
        startMove(zns_bottom,{'right':-165});
    })
};
function startMove(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var is_clear = true;
        for(var n in json){
            //{"width"：300，"height":300}
            //属性名
            var attr = n;
            //目标值
            var dest = json[n];
            if(attr=='opacity'){
                //当前的样式值
                var nowStyle = getStyle(obj,attr);
                nowStyle = Math.round(nowStyle*100);
            }else{
                var nowStyle = parseInt(getStyle(obj,attr));
            }
            //调整速度，这个是缓冲速度。
            var speed = dest>=nowStyle?Math.ceil((dest-nowStyle)/10):Math.floor((dest-nowStyle)/10);
            //当前值是否等于目标
            if(nowStyle!=dest){
                //有多少个到达目标的属性
                if('opacity'==attr){
                    console.log(nowStyle)
                    obj.style.opacity = (nowStyle+speed)/100;
                    obj.style.filter = 'alpha(opacity='+nowStyle+speed+')';
                }else{
                    obj.style[attr] = nowStyle+speed+'px';
                }
                is_clear = false;
            }
            //json的元素个数
        }
        if(is_clear){
            clearInterval(obj.timer);
            if(fn)fn();
        }
    },30);
}
function getStyle(obj,style){
    if(obj.currentStyle){
        return obj.currentStyle[style];
    }else{
        return getComputedStyle(obj,null)[style];
    }
}

太阳系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body{
            background-color: black;
        }
        #circle{
            width:400px;
            height:400px;
            /*border:1px solid skyblue;*/
            border-radius: 400px;
            position: absolute;
            top:200px;
            left:500px;
        }
        span{
            display: block;
            width:20px;
            height:20px;
            background: red;
            border-radius: 100%;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="circle"></div>
    <span class="ball"></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</body>
<script>
    var c = document.getElementById('circle');
    var ball = document.getElementsByTagName('span');
    //获取圆心
    var ball_point = {
        "x": c.offsetLeft+c.offsetWidth/2,
        "y": c.offsetTop + c.offsetHeight/2
    };
    //获取每一个球的初始位置
    for (var i = 0; i < ball.length; i++) {
        ball[i].r = 50*(i+1);
        //改变球的横轴长(椭圆运动)
        ball[i].m = 100*(i+1);
        ball[i].deg = 0;
        //球运动的速度，i越大，值越小（角度越小），球运动越慢
        ball[i].speed = 20/(i+5);
        ball[i].style.left = ball_point.x + ball[i].r - ball[i].offsetWidth/2 + 'px';
        ball[i].style.top = ball_point.y - ball[i].offsetWidth/2 + 'px';
    }
    //获取每隔30s所有球运动的位置
    setInterval(function(){
        for (var i = 0; i < ball.length; i++) {
            ball[i].deg += ball[i].speed;
            //改变球的大小，近大远小
            ball[i].style.width = parseInt(ball[i].offsetTop/6) + 'px';
            ball[i].style.height = parseInt(ball[i].offsetTop/6) + "px";
            // 圆心到某个点的距离公式
            //横轴 r*Math.cos(deg*Math.PI/180)
            //纵轴 r*Math.sin(deg*Math.PI/180)
            ball[i].style.left = ball_point.x -ball[i].offsetWidth/2 + ball[i].m*Math.cos(ball[i].deg*Math.PI/180) + 'px';
            ball[i].style.top = ball_point.y-ball[i].offsetHeight/2 - ball[i].r*Math.sin(ball[i].deg*Math.PI/180) +  'px';
        }
    },30);
</script>
</html>

重力小球

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div{
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 100%;
            position: absolute;
            top: 200px;
        }
    </style>
</head>
<body>
    <button>飞</button>
    <div></div>
</body>
<script>
    var btn = document.querySelector('button');
    var d = document.querySelector('div');
    var x = 10;//水平速度
    var y = 20;//垂直速度
    var g = 2;//向下的加速度
    btn.onclick = function(){
        clearInterval(timer);
        var timer = setInterval(function(){
            //先向上运动垂直速度，再向下运动加速度
            y = y - g;
            //获取小球运动位置
            d.style.left = d.offsetLeft + x + 'px';
            d.style.top = d.offsetTop - y + 'px';
            //判断小球边界值
            if (d.offsetTop >= window.innerHeight - d.offsetHeight) {
                //垂直速度逐渐变慢
                y = -1*y*0.8;
                if (Math.abs(y) <= 2) {
                    clearInterval(timer);
                    d.style.top = window.innerHeight - d.offsetHeight + 'px';
                }
            }
        },30);
    };
</script>
</html>

运动框架

1、querySelector: 类似于getElementById。

2、document.all 获取页面所有元素的集合。在IE返回的是true，其他浏览器返回的是false。

3、三大系列：

4、缓冲运动：可以根据距离目标点的位置修改速度。距离目标越近速度越小。

5、匀速运动的停止条件判断是一个范围。当结束位置距离目标位置的足够近（小于一次运动的距离）的时候就认为已经达到目标位置了。这个时候就可以清除定时器，然后将元素直接设置为目标位置。

6、json

7、透明度：

案例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

运动框架

1、querySelector: 类似于getElementById。

2、document.all 获取页面所有元素的集合。 在IE返回的是true，其他浏览器返回的是false。

3、三大系列：

4、缓冲运动： 可以根据距离目标点的位置修改速度。距离目标越近速度越小。

5、匀速运动的停止条件判断是一个范围。当结束位置距离目标位置的足够近（小于一次运动的距离）的时候就认为已经达到目标位置了。这个时候就可以清除定时器，然后将元素直接设置为目标位置。

6、json

7、透明度：

案例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

2、document.all 获取页面所有元素的集合。在IE返回的是true，其他浏览器返回的是false。

4、缓冲运动：可以根据距离目标点的位置修改速度。距离目标越近速度越小。