JS错误记录 - 右侧悬浮框 - 缓冲运动
本次练习错误总结：
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错误记录 - 右侧悬浮框 - 缓冲运动的更多相关文章
- js右侧悬浮框
示例:屏幕右侧悬浮框 原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop ...
- JS错误记录 - getStyle代替offset、任意值运动框
本次练习错误总结: 1. 改变border的宽度,属性名称不是直接写border,而是borderWidth. 2. 运动函数 -- 清除定时器 -- 开启新的定时器. 不是在新定时器开启之后再清除 ...
- JS：“分享到”之类的悬浮框的运动原理（代码）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS错误记录 - 微博发布
<style> *{ margin: 0; padding: 0;} #ul1{ width: 400px; height: 400px; border: 1px solid #000; ...
- [Javascript]右侧悬浮框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS错误记录 - dom操作 - 排序
本次练习错误总结: 1. for循环要套到按钮的onclick里面,否则onclick点击事件无法依次执行. 2. var n1, var n2 这两个变量是arr.sort排序使用的,所以应该放在s ...
- JS错误记录 - 事件 - 拖拽
错误总结: 1. var disX = 0; 现在window.onload里声明变量,而不是在事件oDiv.onmousedown里面声明并赋值. 对于这个还不是很明白. 2. onmoused ...
- JS错误记录 - 按左右箭头div移动、一串div跟着鼠标移动
本次练习错误总结: 1. div跟着用户操作而移动,首先必须要绝对定位,否则无法移动. 2. if条件语句里面是双等号,不是单等号(赋值). 3. 坐标值没有Right,只能offsetLeft 加减 ...
- JS错误记录 - To-do List
var data = (localStorage.getItem('todolist'))? JSON.parse(localStorage.getItem('todolist')) : { todo ...
随机推荐
- js文字的无缝滚动（上下）
使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...
- Ubuntu 18.04图形化软件包管理器
1.ubuntu软件这个管理工具提供了一种管理您系统中软件的好方法,通过他可以很直观的查找软件安装很简单,打开终端,输入以下命令:----------------------------------- ...
- fill，fill-n，memset的区别
这里在网上搜集归纳了一个总结 memset函数 按照字节填充某字符 在头文件<string.h>中 因为memset函数按照字节填充,所以一般memset只能用来填充char型数组,(因为 ...
- bzoj1051 [HAOI2006]受欢迎的牛 tarjan&&缩点
题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的“喜欢”是可以传递的——如果A喜 欢B,B喜欢C,那么A也喜欢C ...
- hiho 1055 刷油漆 树形dp
一个简单的树上的背包问题. 代码: #include <iostream> #include <cstdio> #include <cstring> #includ ...
- 四 过滤模式 map Only - 作业完成 bloomFilter、top10、去重
第四部分所有的模式涉及一个共同点: 不会改变原有的记录. 这些模式都是寻找数据子集的,不管结果集的规模是小(top10)还是大(像去重结果). 与第三部分差异是,他们通过对数据的相思子端坐概要与分组来 ...
- Windows远程登录Linux
本文以Ubuntu Kylin1404为例,说明如何通过Windows远程登录Linux. 首先,要确保Ubuntu上SSH服务执行正常.默认情况下,Ubuntu已装有SSHclient.比方输入ss ...
- HDU3265 Examining the Rooms【stirling数】
题目链接: http://acm.hdu.edu.cn/showproblem.php? pid=3625 题目大意: 有N个房间,每一个房间的要是随机放在某个房间内,概率同样.有K次炸门的机会. 求 ...
- 让透明div里的文字不透明
最近在工作中遇到一个问题,我在div里写上文字,当我把div变为半透明的时候,里面的文字也会随之透明.情况如下: <div class="box"> 这是一段不应该透明 ...
- 51nod 多重背包问题（二进制优化）
有N种物品,每种物品的数量为C1,C2......Cn.从中任选若干件放在容量为W的背包里,每种物品的体积为W1,W2......Wn(Wi为整数),与之相对应的价值为P1,P2......Pn(Pi ...