盒子移动和滚动加载效果练习

 针对 offset、client 和 scroll 的加强练习

盒子移动

<div class="box box1"></div>
    <div class="box box2"></div>
    <script>
        var box1=document.querySelector('.box1');
        var box2=document.querySelector('.box2');
        
        //匀速运动
        function move(obj,target){
            obj.myInter=setInterval(function(){
            var offsetLeft=obj.offsetLeft;
            //console.log(offsetLeft);
            var num=10; //每次移动10个像素
            //var target=100;
               if(offsetLeft==target){
                   //清除定时器
                    clearInterval(obj.mtInter);
               }else{
                    obj.style.left=offsetLeft+num+'px';
               }
            },1000)
        }
        box1.onclick=function(){
            move(this,100);
        }

        //缓动运动 有个滑动效果 每次移动的距离 由大到小改变
        //思路  要移动100  可以先走40 再走30 再走20 再走10 这样移动就会越来越慢
        function slow(obj,target){
            obj.myInter=setInterval(function(){
                var offsetLeft=obj.offsetLeft;
                var num=(target-offsetLeft)/10;
                //Math.ceil向上取整 Math.floor向下取整
                num>0?num=Math.ceil(num):num=Math.floor(num);
                //注意 随着定时器的运行 num数值会由大到小发生变化
                //因为offsetLeft的值在变大
                if(offsetLeft==target){
                    clearInterval(obj.myInter);
                }else{
                    obj.style.left=offsetLeft+num+'px';
                }
            },1000);
        }
        box2.onclick=function(){
            slow(this,100);
        }

    </script>

 

 

 滚动加载效果

滑动滚动条，判断滚动条是否到达底部，是到达底部后继续加载新内容继续滚动

<div class="box">
			<p>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></p>
			<p>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></p>
			<p>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></p>
			<p>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></p>
			<p>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></p>
		</div>
		
		<script type="text/javascript">
			var box = document.querySelector('.box');
	
			box.addEventListener('scroll',function(){
				// console.log('滚动了');
				var scrollTop = box.scrollTop;//获得向上滚动的距离
				// console.log(scrollTop);
				var clientHeight = box.clientHeight;
				var scrollHeight = box.scrollHeight;
				console.log(scrollTop,clientHeight,scrollHeight);
				
				// 如果出现小数 建议做四舍五入
				// Math.round(scrollTop+clientHeight)
				if(Math.round(scrollTop+clientHeight)>=scrollHeight){
					// console.log('到底了');
					//创建p标签
					var pNode = document.createElement('p');
					pNode.innerHTML = '新添加的内容';
					//尾部插入标签
					box.appendChild(pNode);
				}
			})
		</script>