【网页设计课件】JavaScript中光标特效网页设计.pptVIP

* 教学项目二十四 JavaScript中光标特效网页设计 【基本内容】 讲解JavaScript中几种光标特效网页设计 【教学要求】 学会设计光标特效网页 一、案例设计 设计网页，实现图片跟随光标特效。 html body script language=JavaScript var newtop=0; var newleft=0; if (navigator.appVersion.indexOf(MSIE) != -1) { layerStyleRef=layer.style.; layerRef=document.all; styleSwitch=.style; } function doMouseMove() { layerName = iit eval(var curElement=+layerRef+[+layerName+]) eval(layerRef+[+layerName+]+styleSwitch+.visibility=hidden) eval(curElement+styleSwitch+.visibility=visible) eval(newleft=document.body.clientWidth-curElement+styleSwitch+.pixelWidth) eval(newtop=document.body.clientHeight-curElement+styleSwitch+.pixelHeight) eval(height=curElement+styleSwitch+.height) eval(width=curElement+styleSwitch+.width) width=parseInt(width) height=parseInt(height) if (event.clientX (document.body.clientWidth - 5 - width)) { newleft=document.body.clientWidth + document.body.scrollLeft - 5 – width; } else { newleft=document.body.scrollLeft + event.clientX; } eval(curElement+styleSwitch+.pixelLeft=newleft); ? if (event.clientY (document.body.clientHeight - 5 - height)) { newtop=document.body.clientHeight + document.body.scrollTop - 5 – height; } else { newtop=document.body.scrollTop + event.clientY; } eval(curElement+styleSwitch+.pixelTop=newtop); } document.onmousemove = doMouseMove; ? /script script language=javascript if (navigator.appVersion.indexOf(MSIE) != -1) { document.write(div ID=OuterDiv) document.write(img ID=iit src=rabbit.gif STYLE=position:absolute;TOP:0pt;LEFT:0pt;Z-INDEX:2;visibility:hidden;) document.write(/div) } /script /body ? /html 二、设计案例： 设计文字跟踪光标效果的特效网页。 程序代码如下： html head style .spanstyle { position:absolute; visibility:visible; top:-50px; font-size:10pt; font-family:Verdana; font-weight:bold; color:black; } /style script var x,y; var step=20; var flag=0; ?// Your snappy message. Important: the space at the end of the sentence!!! var message