【网页设计教案】JavaScript中光标特效网页设计.docVIP

教学项目二十四 JavaScript中光标特效网页设计 【教学内容】 讲解JavaScript中几种光标特效网页设计 【教学目的】 使学生学会设计光标特效网页 【教学重点】 文字特效的处理思想 【教学难点】 理解文字特效的处理方法 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 1．JavaScript 入门与提高 杨浩著 清华大学出版社 2．Internet 网页工场 Wittime工作室 重庆出版社 3．JavaScript从入门到精通 电脑报社出版 4．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;