（中职）JavaScript项目式实例教程项目九电子课件工信版

（中职）JavaScript项目式实例教程项目九电子课件工信版 项目九 运动基础 ——滑动的侧边栏  JavaScript项目式实例教程 如图9.1所示，页面窗口左边缘有一个“分享栏”，当鼠标放置到“分享栏”上时，该侧边栏从窗口左边缘由快到慢缓冲运动拉出（如图9.2所示）；当鼠标从“分享栏”或者灰色区域移出时，该侧边栏由快到慢缓冲运动缩进至页面窗口左边缘为如图9.1所示的状态。当滚动鼠标滚轮或者拖动页面窗口右侧滚动条时，该侧边栏也与滚动条同向快到慢缓冲运动并停止在页面窗口可视区域的左边缘垂直居中的位置。 项目情境 图9.1 侧边栏缩进状态 图9.2 侧边栏拉出状态  JavaScript项目式实例教程 掌握物理运动的基本规律。 掌握缓冲运动的原理和实现方法。 掌握窗口滚动事件。 学习目标  JavaScript项目式实例教程 如图9.3所示，在起始位置后面的文本框中输入一个数字代表红色方块运动开始时离页面窗口左边缘的位置；当点击“运动”按钮，红色方块就从文本框中输入的数字对应的位置处开始由快到慢缓冲运动，最后停止在如图9.4所示的位置处，红色方块的左边缘与黑色竖线正好对齐。 任务1 缓冲运动 图9.3 开始位置 图9.4 停止位置  JavaScript项目式实例教程 1、ceil()函数 ceil()函数是Math数学对象的一个方法，其作用是对一个数进行向上取整。例如： Math.ceil(3.24)//值为4 Math.ceil(-3.24)//值为-3 2、floor()函数 floor()函数是Math数学对象的一个方法，其作用是对一个数进行向下取整。例如： Math. floor(3.24)//值为3 Math. floor(-3.24)//值为-4 【相关知识】  JavaScript项目式实例教程 1、ceil()函数 ceil()函数是Math数学对象的一个方法，其作用是对一个数进行向上取整。例如： Math.ceil(3.24)//值为4 Math.ceil(-3.24)//值为-3 2、floor()函数 floor()函数是Math数学对象的一个方法，其作用是对一个数进行向下取整。例如： Math. floor(3.24)//值为3 Math. floor(-3.24)//值为-4 【相关知识】  JavaScript项目式实例教程 3、缓冲运动 缓冲运动不同于匀速运动，它是指物体由快到慢再到停止的运动，运动看上去具有一定的加速度。 假设对象div1在目标位置的左侧，运动的速度为iSpeed，对象的目标位置是targetPos. 1）如果div1的初始位置在目标位置的左侧，实现缓冲运动的函数为： function fn() { var iSpeed= Math.ceil((targetPos-div1.offsetLeft)/8); div1.style.left=div1.offsetLeft+iSpeed+"px"; } window.setInterval(fn,30); 【相关知识】  JavaScript项目式实例教程 2）如果div1的初始位置在目标位置的右侧，实现缓冲运动的函数为： function fn() { var iSpeed= Math.floor((targetPos-div1.offsetLeft)/8); div1.style.left=div1.offsetLeft+iSpeed+"px"; } window.setInterval(fn,30); 【相关知识】  JavaScript项目式实例教程 1、在<body>标签内部输入以下代码，创建一个用于做缓冲运动的DIV，一个用于填写DIV初始位置的文本框，一个“运动”按钮，一个span标签用于标识目标位置。 <body> 起始位置：<input type="text" id="startPos" size="5" /> <input type="button" id="btnMove" value="运动" /> <div id="div1"></div> <span id="span1"></span> </body> 【任务实现】  JavaScript项目式实例教程 2、在<head>标签对中输入以下样式表代码，其中，为了用span标识目标位置，让其显示为一条黑色的竖线。 <style type="text/css"> #div1{ width:100px; height:100px; background-color:#C30; position:absolute; left:0px;} #span1{ width