HTML5应用开发和 与实践课件第17章HTML5、CSS3和 与JavaScript综合应用.ppt

;;17.1 综合实例 1——文字升降特效;（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=document.all(TDiv); if (ob.style.posTop=50){ var hei=document.body.clientHeight; act(50,hei-100,50) } 自定义函数act()，使文字在页面中进行上下滚动。代码如下： function act(yp,yk,yx){ ob=document.all(TDiv); ob.style.posTop=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 使图片不停闪烁 ; 在制作本实例时，首先编写用于实现左右拖动图片的功能函数，再通过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 self.onError=null; currentX = 0; whichIt = null; lastScrollX = 0; NS = (document.layers) ? 1 : 0; IE = (document.all) ? 1: 0; function heartBeat(){ if(IE) diffX = document.body.scrollLeft; ? if(NS) diffX = self.pageXOffset; if(diffX != lastScrollX){ percent = .1 * (diffX - lastScrollX); if(percent 0){ percent = Math.ceil(percent); }else { percent = Math.floor(percent); } if(IE) document.all.floater.style.pixelLeft += percent; if(NS) document.floater.left += percent; lastScrollX = lastScrollX + percent; ;function checkFocus(x){ stalkerx = document.floater.pageX; stalkerwidth = document.floater.clip.width; if( (x stalkerx x (stalkerx+stalkerwidth)) ) ?return true;