招聘网站特效制作首页优秀培训书.pptVIP

项目三:招聘网站特效制作任务二:首页效果制作 问题分析 首页：index.html 1、DIV套表格布局页面 2、网页左侧实现带关闭按钮、随滚动条上下移动的广告层 3、随机漂浮的图片广告 4、向上、向左滚动的信息（利用marquee跑马灯实现） 5、最热招聘（本页内链接） 网站首页效果查看 function changePos( ){ img.style.left = xPos + document.body.scrollLeft; //图片距浏览器左侧位置 img.style.top = yPos + document.body.scrollTop; //漂浮图片距浏览器顶端位置 if (yon==0) { …… } else {…} if (yPos 0) {…… } if (yPos = (height - Hoffset)) {…..} if (xon==0) {……} else {……} if (xPos 0) {……} if (xPos = (width - Woffset)) { …… } setTimeout(changePos( ), 30); //设置定时器，使漂浮图片不间断的移动 } 难点分析 首页随机漂浮广告 查看页面效果 漂浮图片在Y轴的移动方向 漂浮图片达到Y轴边届时，设定移动方向 漂浮图片在X轴的移动方向 漂浮图片达到X轴边届时，设定移动方向 利用Dreamweaver制作网站首页：index.html 添加JavaScript脚本代码 任务 网站首页效果查看 检查 网站首页效果查看 网页代码编写结果 展示 集中问题讲解 大小写 时机-反向移动 调试 兼容性问题 首先、显示声明HTML文档类型，即在头部添加： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。 页面不具有 DTD（或者说没有指定了 DOCTYPE）时，使用 document.body。 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0; 巩固的知识点： CSS样式表style.display document.body.scrollTop获取上方位置 document.body.scrollLeft document.body.clientWidth浏览器宽度 document.body.clientHeight img.offsetHeight漂浮图片高度 img.offsetWidth setTimeout设置定时器 总结