帮助|留言交流|
首 页 阅览室 馆友 我的图书馆
来自：大高老师 > 馆藏分类
配色： 字号：大中小
《JavaScript项目式实例教程》项目九 运动基础 ——滑动的侧边栏
2023-05-25 | 阅：  转：  |  分享 
  
项目九运动基础 ——滑动的侧边栏如图9.1所示，页面窗口左边缘有一个“分享栏”，当鼠标放置到“分享栏”上时，该侧边栏从窗口左边缘由快到慢缓冲
运动拉出（如图9.2所示）；当鼠标从“分享栏”或者灰色区域移出时，该侧边栏由快到慢缓冲运动缩进至页面窗口左边缘为如图9.1所示的状
态。当滚动鼠标滚轮或者拖动页面窗口右侧滚动条时，该侧边栏也与滚动条同向快到慢缓冲运动并停止在页面窗口可视区域的左边缘垂直居中的位置
。项目情境 图9.1 侧边栏缩进状态 图9.2 侧边栏拉出状态掌握物理运动的基本规律。掌握
缓冲运动的原理和实现方法。掌握窗口滚动事件。学习目标如图9.3所示，在起始位置后面的文本框中输入一个数字代表红色方块运动开始时离页
面窗口左边缘的位置；当点击“运动”按钮，红色方块就从文本框中输入的数字对应的位置处开始由快到慢缓冲运动，最后停止在如图9.4所示的
位置处，红色方块的左边缘与黑色竖线正好对齐。任务1 缓冲运动图9.3 开始位置图9.4 停止位置1、ceil()函数ceil()函
数是Math数学对象的一个方法，其作用是对一个数进行向上取整。例如：Math.ceil(3.24)//值为4Math.ceil(-
3.24)//值为-32、floor()函数floor()函数是Math数学对象的一个方法，其作用是对一个数进行向下取整。例如：M
ath. floor(3.24)//值为3Math. floor(-3.24)//值为-4【相关知识】1、ceil()函数ceil
()函数是Math数学对象的一个方法，其作用是对一个数进行向上取整。例如：Math.ceil(3.24)//值为4Math.cei
l(-3.24)//值为-32、floor()函数floor()函数是Math数学对象的一个方法，其作用是对一个数进行向下取整。例
如：Math. floor(3.24)//值为3Math. floor(-3.24)//值为-4【相关知识】3、缓冲运动缓冲运动不
同于匀速运动，它是指物体由快到慢再到停止的运动，运动看上去具有一定的加速度。假设对象div1在目标位置的左侧，运动的速度为iSpe
ed，对象的目标位置是targetPos.1）如果div1的初始位置在目标位置的左侧，实现缓冲运动的函数为：function fn
(){ var iSpeed= Math.ceil((targetPos-div1.offsetLeft)/8); div1.s
tyle.left=div1.offsetLeft+iSpeed+"px";}window.setInterval(fn,30);
【相关知识】2）如果div1的初始位置在目标位置的右侧，实现缓冲运动的函数为：function fn(){ var iSpeed=
Math.floor((targetPos-div1.offsetLeft)/8); div1.style.left=div1
.offsetLeft+iSpeed+"px";}window.setInterval(fn,30);【相关知识】1、在 >标签内部输入以下代码，创建一个用于做缓冲运动的DIV，一个用于填写DIV初始位置的文本框，一个“运动”按钮，一个span标签用于
标识目标位置。起始位置： put type="button" id="btnMove" value="运动" />

【任务实现】2、在标签对中输入以下样式表代码，其中，为了
用span标识目标位置，让其显示为一条黑色的竖线。 【任务实现】【任务实现】
献花(0)
+1
(本文系大高老师首藏)