湖北职业技术学院：《网页设计》理论课 教学项目二十四 JavaScript中光标特效网页设计

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 教学项目二十四 JavaScript中光标特效网页设计 【教学内容】 讲解 JavaScript中几种光标特效网页设计 【教学目的】 使学生学会设计光标特效网页 【教学重点】 文字特效的处理思想 【教学难点】 理解文字特效的处理方法 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 杨浩著 清华大学出版社 2.< Internet网页工场〉 Wittime工作室重庆出版社 3.< JavaScript从入门到精通 电脑报社出版 4.< JavaScript编程起步〉 人民邮电出版社 【教学过程】 【新课 案例设计 设计网页,实现图片跟随光标特效

湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目二十四 JavaScript 中光标特效网页设计 【教学内容】 讲解 JavaScript 中几种光标特效网页设计 【教学目的】 使学生学会设计光标特效网页 【教学重点】 文字特效的处理思想 【教学难点】 理解文字特效的处理方法 【教学方式】 讨论式、案例分析式、练习式相结合 【教学参考】 1．> 杨浩著 清华大学出版社 2．> Wittime 工作室 重庆出版社 3．> 电脑报社出版 4．> 人民邮电出版社 【教学过程】 【新课】 一、案例设计 设计网页，实现图片跟随光标特效

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 eG: \Fro 文件① )查看收家)工且①)帮助Q ⊙后·国的户搜收头的媒体,是·口 地址迎包G: rontPage\javes=amp5.ht 习转到桩 「回2Ma,·SMao.sInt,-e4htm 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)

湖北职院计算机科学与技术系理论课教案—《网页设计》 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(') document. write( ' document. write(') /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; if (navigator.appVersion.indexOf("MSIE") != -1) { document.write('') document.write('') document.write('') } 二、设计案例： 设计文字跟踪光标效果的特效网页

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 ⑥后·⑥的必批索古收隙夹的媒体份自·丽·□ 地址)]G:Frc 转到3 程序代码如下 Head> spanstyle I position: absolute 1Opt font-family: Verdana font-weight: bold 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

湖北职院计算机科学与技术系理论课教案—《网页设计》 程序代码如下： .spanstyle { position:absolute; visibility:visible; top:-50px; font-size:10pt; font-family:Verdana; font-weight:bold; color:black; } 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=1 xpos [i]xpos [i-1+step ypos [i]=ypos [i-1 xpos [o]=x+step ypos [o]=y for(i=0: 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=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; 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) }

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 ") document. write(message[il) document. write("") f (document. layers)( document. captureEvents(Event. MOUSEMOVE) document onmousemove handlerMM 7/-End of JavaScript /htmI> 案例设计三、 设计网页,打开网页后禁止使用鼠标左右键。 ⊙·②凶团的索次收碟买的螺体·品丽·□ crosoft Internet Explore区 不,禁止使用左

湖北职院计算机科学与技术系理论课教案—《网页设计》 ") document.write(message[i]) document.write("") } if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = handlerMM; // - End of JavaScript - --> 案例设计三、 设计网页，打开网页后禁止使用鼠标左右键

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 后·国园的搜索收家夹的城体③·品 地址①))G: FrontPage\javassump\7.tm 转到桩接 对不起,禁止使用右键 程序代码如下 Head> Script language=JavaScript> function click if (event. button==1) alert("对不起,禁止使用左键");} f (event. button==2) alert("对不起,禁止使用右键”); document onmousedown= clic K/html> 案例设计四、设计网页,计算用户停留时间

湖北职院计算机科学与技术系理论课教案—《网页设计》 程序代码如下： function click() { if (event.button==1) {alert("对不起，禁止使用左键");} if (event.button==2) {alert("对不起，禁止使用右键");} } document.onmousedown=click; 案例设计四、设计网页，计算用户停留时间

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 ■口口f!工mD1 回 您在这儿停留了79秒钟欢迎下次再来 r nanpi 3洪恩在 CH E 程序代码如下 Script language= Javascript"> pageOpen new Date O pageClose new Date o minutes=(page Close. getMinuteso- pageOpen. getMinutes O) seconds =(pageClose. getSecondso-pageOpen get Seconds O) time=(seconds +(minutes 60)) 秒钟") alert(您在这儿停留了’+time+’.欢迎下次再来!) 测试停留时间 分析 pageOpen new Date 定义一个新的日期对象,纪录开始浏览页面时

湖北职院计算机科学与技术系理论课教案—《网页设计》 程序代码如下： 测试停留时间... 分析： pageOpen = new Date(); 定义一个新的日期对象，纪录开始浏览页面时

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 间。 function stay O 定义一个函数 定义一个新的日期对象,纪录结束浏览页面时 pageclose new date minutes =(pageClose getMinuteso “分钟”变量等于结束时间的分钟数减去开始 pageOpen. getMinutes O) 时间的分钟数 seconds=( pageClose. getSeconds0-秒数变量等于结束时间的秒数数减去开始 pageOpen. getSeconds O) 时间的秒数数 时间变量等于“秒数”变量加上“分钟”变量 time=(seconds +(minutes 60)) 乘以60,即变为以秒纪录 alert是 JavaScript的窗口对象方法,其功 time=(time+"秒钟); alert(您在这 能是弹出一个具有0K对话框并显示()中的字 儿停留了’+time+’.欢迎下次再来!) 符串,告诉在此页面停留的时间 onUnload=stay O 页面卸载的时候,调用stay0函数 【课后小结】 本节介绍了光标特效的几个实例,要求能够读懂相应的源代码,并能通过修改代码 实现用户要求的光标特效

湖北职院计算机科学与技术系理论课教案—《网页设计》 间。 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()函数。 【课后小结】 本节介绍了光标特效的几个实例，要求能够读懂相应的源代码，并能通过修改代码 实现用户要求的光标特效