文档介绍：本章要求:
第17章 HTML5、CSS3与JavaScript综合应用
文字升降特效
闪烁的图片
左右移动的图片
自动隐藏菜单
树状导航菜单
颜色选择器
主要内容
1——文字升降特效
2——闪烁的图片
3——左右移动的图片
4——自动隐藏菜单
5——树状导航菜单
6——颜色选择器
第17章 HTML5、CSS3与JavaScript综合应用
综合实例 1——文字升降特效
在一些阅读性的网站中,为了使浏览者更便于阅读,页面中的文字将自动进行滚动。本实例在页面打开后,页面中的文字将在一定的范围内进行上下滚动,运行结果如图17-1所示。
图17-1 文字上下滚动
本实例主要是用document对象中的<body>对象的clientHeight属性来获取工作区的高,并设置文字移动的范围,并用window对象的setTimeout()方法使文字在指定的区域内进行上下移动。
注意:
一定要将层(div)的style样式的position属性设为absolute,否则,层将不会移动。
(1)在<body>标记中添加一个层,代码如下:
<div id="TDiv" style="position: absolute;top: 50; color: #000000;font-size:20px;">
<p>欢迎购买明日科技图书</p></div>
(2)编辑用于实现文字上下滚动的JavaScript代码。
自定义函数,用于设置文字所显示的位置,并调用自定义函数act()。代码如下:
<script language="JavaScript">
down=true;
function activity(){
ob=("TDiv");
if (<=50){
var hei=;
act(50,hei-100,50)
}
自定义函数act(),使文字在页面中进行上下滚动。代码如下:
function act(yp,yk,yx){
ob=("TDiv");
=yp;
if (yp<=yx) down=true;
if (yp>=yk) down=false;
if (down){step=4;}
else{step=-4;}
setTimeout('act('+(yp+step)+','+yk+','+yx+')', 35);
}
在窗体载入时,调用自定义函数activity()。代码如下:
activity();
</script>
在一些招商的网站中,页面中包含着大量的广告信息,有时会使用一些网页特效来吸引浏览者。在本例中,为了使图片链接更具吸引力,在图片中增加了不停闪烁的效果,如图17-2所示。
图17-2 使图片不停闪烁
综合实例 2——闪烁的图片
本实例将使用JavaScript编写一个可以左右拖动的图片,当用户在图片上按下鼠标左键不放时,就可以左右拖动图片,当释放鼠标左键时,则将图片放置在释放鼠标左键时的位置上,如图17-3所示。
图17-3 可以左右拖动的图片
综合实例 3——左右移动的图片
在制作本实例时,首先编写用于实现左右拖动图片的功能函数,再通过window对象的setInterval()方法每隔1ms执行一次实现左右拖动图片的函数,最终实现可以左右拖动图片的效果。
(1)在<body></body>区域中添加一段CSS样式,其代码如下:
<STYLE type=text/css>#floater {
LEFT: 445px; POSITION: absolute; TOP: -3px; VISIBILITY: visible; WIDTH: 125px; Z-INDEX: 10}
</STYLE>
(2)编写用于实现可以左右拖动图片的JavaScript代码。
<Script language="JavaScript">
=null;
currentX = 0;
whichIt = null;
lastScrollX = 0;
NS = () ? 1 : 0;
IE = () ? 1: 0;
function heartBeat(){
if(IE) diffX = ;
  if(NS) diffX = ;
if(d