1、项目三:招聘网站特效制作 任务二:首页效果制作,问题分析,首页: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
2、=0) else if (yPos = (height - Hoffset) if (xon=0) else if (xPos = (width - Woffset) setTimeout(changePos( ), 30); /设置定时器,使漂浮图片不间断的移动 ,难点分析,首页随机漂浮广告,查看页面效果,漂浮图片在Y轴的移动方向,漂浮图片达到Y轴边届时,设定移动方向,漂浮图片在X轴的移动方向,漂浮图片达到X轴边届时,设定移动方向,利用Dreamweaver制作网站首页:index.html 添加JavaScript脚本代码,任务,网站首页效果查看,检查,网站首页效果查看,网页代码编写结果
3、展示 集中问题讲解 大小写 时机-反向移动 调试 兼容性问题,首先、显示声明HTML文档类型,即在头部添加:页面具有 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设置定时器,总结,