DOM操作与无缝滚动实现-优快云博客

offsetTop
offsetLeft ===>元素到定位父级的距离如果没有定位父级就找到的是到页面的顶部或者左部的距离

offsetParent ======>找到定位父级

//如果要找到页面顶部或左边的绝对距离

function offset(dom){
    var cleft = 0;
    var ctop = 0;
    while(dom){
        cleft += dom.offsetLeft;
        cTop += dom.offsetTop;
        dom = dom.offsetParent;
        //最后找到body
    };
    return {top:ctop,left:cleft};
}

元素的可见高度宽度

clientHeight clientWidth;

//页面的高度.
//documentElement  把document转化document节点.  document自身没有clientHeight.
var height = document.documentElement.clientHeight;

//IE9+  window.
var height1 = window.innerHeight;

滚动高度 scrollTop

//谷歌 其他不支持=0
var scrollTop1  = document.body.scrollTop;
//除了谷歌=0    其他支持
var scrollTop2 = document.documentElement.scrollTop;

//兼容写法
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
        #box{width: 440px;height: 120px;border: 5px solid #333;margin: 30px auto;overflow: hidden;position:relative}
        #list{width:880px;height: 120px;position: absolute;left: 0}
        #list li{width: 110px;height: 120px;float: left;}
    </style>
</head>
<body>
    <div id="box">
        <ul id="list">
            <li style="background:red"></li>
            <li style="background:pink"></li>
            <li style="background:green"></li>
            <li style="background:black"></li>
            <li style="background:yellow"></li>
        </ul>
    </div>
    <script type="text/javascript">
        var list = document.getElementById("list");
        list.innerHTML += list.innerHTML;
        var len = list.children;
        list.style.width = len[0].offsetWidth*len.length +"px";
        var timer = null;
        function scroll(){
            timer = setInterval(function(){
                // console.log(list.offsetWidth,speed);
                if(list.offsetLeft <= -list.offsetWidth/2){
                    list.style.left = 0;
                }
                list.style.left = list.offsetLeft-10 +"px";
            },50);
        };
        scroll();
    </script>
</body>
</html>

碰撞小球

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        *{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
        #box{width: 100px;height: 100px;background: lightgreen;position:absolute;left: 0;top: 0;border-radius: 50%;}
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        /*
            重力下的小球
         */
        var boxDom = document.getElementById("box");
        boxDom.onclick = function(){
            auto();
        };

        //步长
        var speed = 0;
        var timer = null;
        function auto(){
            // !!!!
            if(timer)clearInterval(timer);
            timer = setInterval(function(){
                speed +=5;
                var cTop = boxDom.offsetTop + speed;
                var maxHeight = getHeight() - boxDom.offsetHeight;//每次都获取
                console.log(speed);
                if(cTop >= maxHeight){  //把它变成重力  ==>  加= :  speed 变小.
                    cTop = maxHeight;
                    speed = -speed;
                    //摩擦力 每次减小一点
                    // speed *= 0.9;
                }
                boxDom.style.top = cTop + "px";
            },1000/30);

        }
        // 获得页面高度
        function getHeight(){
            return window.innerHeight?window.innerHeight:document.documentElement.clientHeight;
        }
    </script>
</body>
</html>

多个球 ===>如何控制? 数组

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li {list-style: none;}
            body {font-family: "Microsoft yahei";}
            div {width: 50px; height: 50px; background: lightgreen; position: absolute; border-radius: 50%;}
        </style>
    </head>
<body>

<script type="text/javascript">
    var num = 10;
    var arr = [];
    var timer = null;
    var speed; //速度一样
    for(var i=0;i<num;i++){
        var boxDom = document.createElement("div");
        document.body.appendChild(boxDom);
        // speed = i+2;
        // console.log(speed);
        boxDom.x=0;
        boxDom.y=0;
        boxDom.xstep = randomNum(6,15);
        boxDom.ystep = randomNum(6,15);
        arr.push(boxDom);
    };
    function sports(){
        for(var i=0;i<arr.length;i++){
            //!!!!!!
            var boxDom = arr[i];

            var maxHeight = getmax("height")- boxDom.offsetHeight;
            var maxWidth =  getmax("width")- boxDom.offsetWidth;
            boxDom.x +=boxDom.xstep;
            boxDom.y +=boxDom.ystep;
            console.log(boxDom.xstep+"====="+boxDom.ystep);
            if(boxDom.x < 0){
                boxDom.x = 0;
                boxDom.xstep = -boxDom.xstep;  //x < 0   speed为正
            }
            if(boxDom.x > maxWidth){
                boxDom.x = maxWidth;
                boxDom.xstep = -boxDom.xstep; //x > maxWidth   speed为负
            }
            if(boxDom.y > maxHeight){
                boxDom.y = maxHeight;
                boxDom.ystep = -boxDom.ystep;
            }
            if(boxDom.y < 0){
                boxDom.y = 0;
                boxDom.ystep = -boxDom.ystep;
            }
            boxDom.style.left = boxDom.x + "px";
            boxDom.style.top = boxDom.y + "px";
        }
    }
    timer = setInterval(sports,30);
    function getmax(param){
        if(param == "height"){
            return window.innerHeight?window.innerHeight:document.documentElement.clientHeight;
        }else{
            return window.innerWidth?window.innerWidth:document.documentElement.clientWidth;
        }
    };
    function randomNum(start,end){
        return Math.floor(Math.random()*(end-start+1)+start);
    }
</script>
</body>
</html>

这里写图片描述

Dom(2)