教学项目二十四 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; 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() 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) } </script> </head> <body onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll"> <script language=javascript> <!-- Beginning of JavaScript - for (i=0;i<=message.length-1;i++) { document.write("<span id='span"+i+"' class='spanstyle'>") document.write(message[i]) document.write("</span>") } if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = handlerMM; // - End of JavaScript - --> </script> </body> </html> 案例设计三、 设计网页，打开网页后禁止使用鼠标左右键。   程序代码如下： <html> <head> <script language=JavaScript> function click() { if (event.button==1) {alert("对不起，禁止使用左键");} if (event.button==2) {alert("对不起，禁止使用右键");} } document.onmousedown=click; </script> </head> </html> 案例设计四、设计网页，计算用户停留时间。  程序代码如下： <html> <body onUnload=stay()> <script language="Javascript"> <!-- pageOpen = new Date(); function stay() { pageClose = new Date(); minutes = (pageClose.getMinutes() - pageOpen.getMinutes()); seconds = (pageClose.getSeconds() - pageOpen.getSeconds()); time = (seconds + (minutes * 60)); time = (time + " 秒钟"); alert('您在这儿停留了' + time + '.欢迎下次再来!'); } //--> </script> <p>测试停留时间... </body> </html> 分析： pageOpen = new Date(); 定义一个新的日期对象，纪录开始浏览页面时间。  function stay() 定义一个函数。  pageClose = new Date(); 定义一个新的日期对象，纪录结束浏览页面时间。  minutes = (pageClose.getMinutes() - pageOpen.getMinutes()); “分钟”变量等于结束时间的分钟数减去开始时间的分钟数。  seconds = (pageClose.getSeconds() - pageOpen.getSeconds()); “秒数”变量等于结束时间的秒数数减去开始时间的秒数数。  time = (seconds + (minutes * 60)); 时间变量等于“秒数”变量加上“分钟”变量乘以60，即变为以秒纪录。  time = (time + " 秒钟"); alert('您在这儿停留了' + time + '.欢迎下次再来!'); alert()是JavaScript的窗口对象方法，其功能是弹出一个具有OK对话框并显示（）中的字符串 ，告诉在此页面停留的时间。  onUnload=stay() 页面卸载的时候，调用stay()函数。   【课后小结】 本节介绍了光标特效的几个实例，要求能够读懂相应的源代码，并能通过修改代码实现用户要求的光标特效。