湖北职晚计算机科学与技术亲理论课教案一《网页设计》 教学项目二十四 JavaScript中光标特效网页设计 【教学内容】 讲解 JavaScript中几种光标特效网页设计 【教学目的】 使学生学会设计光标特效网页 【教学重点】 文字特效的处理思想 【教学难点】 理解文字特效的处理方法 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 < JavaScript入门与提高〉>杨浩著 清华大学出版社 2.< Internet网页工场〉 Wittime工作室重庆出版社 3.< JavaScript从入门到精通 电脑报社出版 4.< JavaScript编程起步〉 人民邮电出版社 【教学过程】 【新课 案例设计 设计网页,实现图片跟随光标特效
湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目二十四 JavaScript 中光标特效网页设计 【教学内容】 讲解 JavaScript 中几种光标特效网页设计 【教学目的】 使学生学会设计光标特效网页 【教学重点】 文字特效的处理思想 【教学难点】 理解文字特效的处理方法 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 1．<<JavaScript 入门与提高>> 杨浩著 清华大学出版社 2．<<Internet 网页工场>> Wittime 工作室 重庆出版社 3．<<JavaScript 从入门到精通>> 电脑报社出版 4．<<JavaScript 编程起步>> 人民邮电出版社 【教学过程】 【新课】 一、案例设计 设计网页，实现图片跟随光标特效
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 eG: \Fro 文件① )查看收家)工且①)帮助Q ⊙后·国的户搜收头的媒体,是·口 地址迎包G: rontPage\javes=amp5.ht 习转到桩 「回2Ma,·SMao.sInt,-e4htm <html> Script language=" JavaScript"> var newtop=0 var newleft=0 if (navigator. appversion indexOf("MSIE")!=-1) yer. style. layerRef="document. all function doMouseMove o layerName =iit eval( var curElement=+layerRef+'["+layerName+"]') eval(layer Ref+'[+layerName+"'+styleSwitch+', visibility="hidden") eval( curElement'+styleSwitch+. visibility="visible") eval( newleft=document. body. client Width-curElement'+styleSwitch+. pixelWidt eval( newtop=document. body. clientHeight-curElement'+sty leSwitch+. pixelHeig eval(height=cur Element'+styleSwitch+'. height') eval( width= urelement’+ styleSwitch+’. width’) width=parseInt(width) height=parse Int(height)
湖北职院计算机科学与技术系理论课教案—《网页设计》 <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+'.pixelWidt h') eval('newtop=document.body.clientHeight-curElement'+styleSwitch+'.pixelHeig ht') eval('height=curElement'+styleSwitch+'.height') eval('width=curElement'+styleSwitch+'.width') width=parseInt(width) height=parseInt(height)
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 if(event. client >(document. body. clientWidth width)) newleft=document. body clientWidth document body scrollLeft -5 width newleft=document. body. scrollLeft event. clientX eval( curElement'+styleSwitch+. pixelLeft=newleft') if(event. client>(document. body clientHeight -5-height)) newtop=document. body. clientHeight document body. scrollTop -5 height else newtop=document. body scrollTop event. client I( curElement'+styleSwitch+' pixel Top=newtop,') document onmousemove doMousemove / 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: Opt: LEFT: Opt; Z-INDEX: 2: visibility: hidden; ">' document. write(</div>') </script> </body> /htmI> 设计案例 设计文字跟踪光标效果的特效网页
湖北职院计算机科学与技术系理论课教案—《网页设计》 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> 二、设计案例： 设计文字跟踪光标效果的特效网页
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 ⑥后·⑥的必批索古收隙夹的媒体份自·丽·□ 地址)]G:Frc 转到3 程序代码如下 <html> Head> spanstyle I position: absolute 1Opt font-family: Verdana font-weight: bold <script> var x, y // Your snappy message. Important: the space at the end of the sentence!!! var message="湖北职院百年名校银领人才摇篮 message=message. split(") var xpos=new Array o for (i=0; i<=message length-1; i++)f
湖北职院计算机科学与技术系理论课教案—《网页设计》 程序代码如下： <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="湖北职院 百年名校 银领人才摇篮" message=message.split("") var xpos=new Array() for (i=0;i<=message.length-1;i++) { xpos[i]=-50
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 var ypos=new Array o for (i=0; i<=message length-1; i++)( function handler(e)I x=(document layers)? e pageX: document. body. scrollLeft+event. clientX y =(document. layers)? e pageY: document body. scrollToptevent client flag=1 function makesnakeo t if (flag==l & document. all)i for (i=message. length-1: 1>=1 xpos [i]xpos [i-1+step ypos [i]=ypos [i-1 xpos [o]=x+step ypos [o]=y for(i=0: i<message length-1; i++)I var thisspan eval(span"(i)+ style") thisspan. posLeft=xpos [i] thisspan pos top=ypos [] else if (flag==1 & document layers)i for(=message length-1: i>=l; i-)I xpos [i]=xpos [i-1+step ypos [i]=ypos [i-1 xpos [o]=x+step ypos [o]=y for (i=0: i<message length-l; i++)I var thisspan eval("document. span"+i) thisspan. left=xpos[i] thisspan tol var timer=setTimeout("makesnakeo", 30
湖北职院计算机科学与技术系理论课教案—《网页设计》 } var ypos=new Array() for (i=0;i<=message.length-1;i++) { ypos[i]=-50 } function handlerMM(e){ x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY flag=1 } function makesnake() { if (flag==1 && document.all) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i] } } else if (flag==1 && document.layers) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("document.span"+i) thisspan.left=xpos[i] thisspan.top=ypos[i] } } var timer=setTimeout("makesnake()",30) }