本次练习错误总结：

1.  正确：
startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop);
错误：
startMove(document.documentElement.clientHeight - oDiv.offsetTop + scrollTop);
startMove(iTarget); 这个函数的目标点 iTarget 应该是 可视窗高度 – div的高度 + 滚动条上方的滚动距离
div的高度是  offsetHeight，是一整个div的高度。 div的offsetTop是它的top位置值。
 
2.  必须用timer指定定时器，否则清除定时器时清除不了。 

timer = setInterval(function (){ },30)    // 不能直接写setInterval(function (){ },30)


3.  函数作用域问题？？ （感觉经常犯这种错误）




var speed = (iTarget - oDiv.offsetTop)/4;




该速度变量是定时器使用，所以要定义在定时器的函数里面。 而不是定义到startMove( ); 这个运动函数里。


 


4. 




 startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); 






//这里末尾不应该加‘px’， 括号内是函数的参数，而不是赋值给样式！


且后面定时器里 if(oDiv.offsetTop == iTarget)  offsetTop返回值为数字。 iTarget不需要px单位。



5.  clearInterval ( ); 清除定时器是在startMove ( ); 运动函数里面的一开始去清除，而不是外面。且应该在括号内指定(timer)。



6.  该段代码oDiv获取过两次。在window.onscroll函数和 function startMove( )里分别获取了。
因为运动函数和窗口启动自带的滚动条函数不是包含关系，所以要重新获取一遍div变量。



7.  定时器格式  setInterval ( function () {  },30)   括号里要跟function函数。



8. 




 if(iTarget==oDiv.offsetTop)     //应该是oDiv.offsetTop == iTarget，即运动的位置达到了目标值 




疑问


为什么window.onscroll函数 和后面的startMove函数是分别运行的关系，而不是包含关系？



第二次写的代码批注：




<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>右侧悬浮框</title>

  <style>

    #div1{

      width: 100px;

      height: 150px;

      background-color: plum;

      position: absolute;

      right: 0;

      bottom: 0;

    }

  </style>

  <script>

    window.onscroll = function () {

      var oDiv = document.getElementById('div1');

      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

      //startMove(document.documentElement.clientHeight-oDiv.offsetTop+scrollTop);

      startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);

      //这里应该是oDiv.offsetHeight，不是offsetTop。  区别是？？？

    };

    var timer = null;

    function startMove(iTarget) {

      clearInterval(timer);

      var oDiv = document.getElementById('div1');

      //setInterval(function (){   这里没用timer指定定时器。。。所以前面清除定时器和这里对应不上。

      timer = setInterval(function (){

        var speed = (iTarget - oDiv.offsetTop)/4; //这个变量是定时器里面使用的，要定义到定时器的函数里。

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

        if (oDiv.offsetTop == iTarget)

        {

          clearInterval(timer);

        }

        else

        {

          oDiv.style.top = oDiv.offsetTop + speed + 'px';

        }

      },30)

    }

  </script>

</head>

<body style="height: 2000px";>

<div id="div1">

</div>

</body>

</html>




错误代码：




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>右侧悬浮框</title>

    <style>

        #div1{

            width: 100px;

            height: 150px;

            background-color: palevioletred;

            position: absolute;

            right: 0;

            bottom: 0;

        }

    </style>

    <script>

        window.onscroll = function () {

            var oDiv = document.getElementById('div1');

            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

            startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); //这里末尾不应该加‘px’！ 括号内是函数的参数，而不是赋值给样式！

        };

            var timer = null;

            //clearInterval();     //此处是否需要清除？ 要清除，是在startMove运动开始里面去清除。

            //timer=setInterval(function startMove(iTarget) //写法错误，定时器是在startMove函数里面开启，定时器和函数不是同级的。

            function startMove(iTarget)

            {

                var oDiv = document.getElementById('div1');

                //运动函数和窗口启动自带的滚动条函数不是包含关系，所以要重新获取一遍div变量。

                clearInterval(timer);

                timer=setInterval(function () {    //setInterval格式：括号里面要跟个函数function

                    var speed = (iTarget - oDiv.offsetTop)/4; // speed不是前面startMove传参的，是新的变量，这里要用var！！

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

                    //if(iTarget==oDiv.offsetTop){   //应该是oDiv.offsetTop == iTarget，即运动的位置达到了目标值

                    if(oDiv.offsetTop == iTarget)

                    {

                        clearInterval(timer);

                    }

                    else

                    {

                        oDiv.style.top = oDiv.offsetTop+speed+'px';

                    }

                },30);

            }

    </script>

</head>

<body style="height: 2000px;">

<div id="div1">

</div>

</body>

</html>




正确代码：




<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>无标题文档</title>

    <style>

        #div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}

    </style>

    <script>

        window.onscroll=function ()

        {

            var oDiv=document.getElementById('div1');

            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

            //oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';

            startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);

            //可视窗高度-div高度+滚动条顶部距离

       };

        var timer=null;

        function startMove(iTarget)

        {

            var oDiv=document.getElementById('div1');

            //为什么要分别获取div1？？

            // 为什么window.onscroll函数 和后面的startMove函数是分别运行的关系，而不是包含关系？

            clearInterval(timer);

            timer=setInterval(function (){

                var speed=(iTarget-oDiv.offsetTop)/4;

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

                if(oDiv.offsetTop==iTarget)

                {

                    clearInterval(timer);

                }

                else

                {

                    oDiv.style.top=oDiv.offsetTop+speed+'px';

                }

            }, 30);

        }

    </script>

</head>

<body style="height:2000px;">

<div id="div1"></div>

</body>

</html>


												


											
JS错误记录 - 右侧悬浮框 - 缓冲运动的更多相关文章
	

    
								
  1. js右侧悬浮框
		
    示例:屏幕右侧悬浮框 原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop ...
    
		
    2. 
						
  2. JS错误记录 - getStyle代替offset、任意值运动框
		
    本次练习错误总结: 1. 改变border的宽度,属性名称不是直接写border,而是borderWidth. 2. 运动函数 -- 清除定时器 -- 开启新的定时器.  不是在新定时器开启之后再清除 ...
    
		
    3. 
						
  3. JS：“分享到”之类的悬浮框的运动原理（代码）
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    4. 
						
  4. JS错误记录 - 微博发布
		
    <style> *{ margin: 0; padding: 0;} #ul1{ width: 400px; height: 400px; border: 1px solid #000;  ...
    
		
    5. 
						
  5. [Javascript]右侧悬浮框
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    6. 
						
  6. JS错误记录  - dom操作 - 排序
		
    本次练习错误总结: 1. for循环要套到按钮的onclick里面,否则onclick点击事件无法依次执行. 2. var n1, var n2 这两个变量是arr.sort排序使用的,所以应该放在s ...
    
		
    7. 
						
  7. JS错误记录 - 事件 - 拖拽
		
    错误总结: 1. var disX = 0;   现在window.onload里声明变量,而不是在事件oDiv.onmousedown里面声明并赋值. 对于这个还不是很明白. 2. onmoused ...
    
		
    8. 
						
  8. JS错误记录 - 按左右箭头div移动、一串div跟着鼠标移动
		
    本次练习错误总结: 1. div跟着用户操作而移动,首先必须要绝对定位,否则无法移动. 2. if条件语句里面是双等号,不是单等号(赋值). 3. 坐标值没有Right,只能offsetLeft 加减 ...
    
		
    9. 
						
  9. JS错误记录 - To-do List
		
    var data = (localStorage.getItem('todolist'))? JSON.parse(localStorage.getItem('todolist')) : { todo ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Unified BeginFrame scheduling for Chrome
			
    Unified BeginFrame scheduling for Chrome http://goo.gl/D1Qxrr Status: http://crbug.com/401331 and ht ...
    
			
    2. 
						
  2. ubuntu 18.04网卡命名规则改回传统的ethx
			
    自15版本开始网卡命名规则就不叫eth0了.而是用可预期网络接口设备名称的命名规则,比如网卡名为enp3s0 . 如果想要变回ethx也是可以的,参考以下步骤: 1.编辑/etc/default/gr ...
    
			
    3. 
						
  3. 四舍五入VS银行家舍入法
			
    在学习python的时候,遇见了一个颠覆了我传统观念的四舍五入. 看下面,round()的结果和我们以前根深蒂固的四舍五入是不同的. >>> round(0.5) 0 >> ...
    
			
    4. 
						
  4. TCP的连接管理
			
    创建连接:(三次握手) 第一步: 客户端向服务器发送一个报文,该报文不含有数据段,SYN=1,随机产生sequence number(随机产生可用于避免某些安全性攻击) 第二步: 服务器收到报文,为这 ...
    
			
    5. 
						
  5. 据统计WIN10用户已经比WIN7多
			
    数据统计机构Netmarketshare今天发布了2018年12月份最新的桌面操作系统份额报告.在看似无休止的等待之后,微软在2018年取得了最后的胜利,不仅成为市值最高的公司,而且最新的Window ...
    
			
    6. 
						
  6. who---显示目前登录系统的用户信息
			
    who命令是显示目前登录系统的用户信息.执行who命令可得知目前有那些用户登入系统,单独执行who命令会列出登入帐号,使用的终端机,登入时间以及从何处登入或正在使用哪个X显示器. 语法 who(选项) ...
    
			
    7. 
						
  7. 在MAC上安装lxml到Python3
			
    首先可以直接使用以下命令安装lxml,但是会默认安装到Python2,没有找到怎么指定安装到Python3 sudo easy_install lxml 想要安装到Python3需要先安装pip: s ...
    
			
    8. 
						
  8. Unity经验之谈
			
    1.全屏与非全屏之间的切换 if (Input.GetMouseButtonDown(1)) { Screen.fullScreen = !Screen.fullScreen; } 2.Camera适 ...
    
			
    9. 
						
  9. C#版清晰易懂TCP通信原理解析（附demo）
			
    [转] C#版清晰易懂TCP通信原理解析(附demo) (点击上方蓝字,可快速关注我们) 来源:周见智 cnblogs.com/xiaozhi_5638/p/4244797.html 对.NET中网络 ...
    
			
    10. 
						
  10. 洛谷—— P1196 银河英雄传说
			
    https://www.luogu.org/problem/show?pid=1196 题目描述 公元五八○一年,地球居民迁至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始 ...
    
			
    11.