湖北职业技术学院：《网页设计》第二十四讲 Javascript中光标特效网页设计

教学项目二十四 Javascript中光标特效网页设计 基本内容】 讲解 JavaScript中几种光标特效网页设计 教学要求】 学会设计光标特效网页 案例设计 设计网页,实现图片跟随光标特效

教学项目二十四 JavaScript中光标特效网页设计 【基本内容】 讲解JavaScript中几种光标特效网页设计 【教学要求】 学会设计光标特效网页 一、案例设计 设计网页，实现图片跟随光标特效

a G: \FrontPage\javaSsanp5ht=- microsoft Internet Explorer 回回 文件 编辑)查看①收藏〔)工具〔)帮助Q ⊙后退·③·图的搜索次收夹的媒体的,·□ 习转到链接 完毕 3我的电脑 画2Ma.5nt4h

var newtop=0; var newleft=0: if(navigator, appVersion indexOf("MSIE")! =-1)t layerStyle Ref="layer style. i layer Ref=document. all style Switch="style": function doMouseMoveo I layerName =iit eval(var curElement=+layerRef+'[+layerName+'"]')

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'+style Switch+ width) width=parseInt(width) height=parseInt(height) if (event. clientx >(document body. clientWidth-5-width)) newleft=document. body. clientWidth document body. scrollLeft width:

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. client; evalCcurElement'+style Switch+. pixelLeft=newleft); if (event. client >(document body. clientHeight -5-height)) newtop=document. body. clientHeight document body.scrolL Top-5 height; else newtop=document. body. scrollTop event client eval( curElement'+styleSwitch+'. pixelTop=newtop')

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.app Version. indexof("MSIE")!=-1)t document. write() document. write( ) document. write()

document.onmousemove = doMouseMove; if (navigator.appVersion.indexOf("MSIE") != -1) { document.write('') document.write('') document.write('') }

设计案例: 设计文字跟踪光标效果的特效网页。 a G: \FrontPage\javaSsanp\6.ht=- icrosoft Internet Explorer 文件更)编辑)查着⑩)收藏)工具①帮助a ⊙后退·因的搜索次收夹的媒的,品, 「地址① G: \FrontPage\javaSsamp \6.htm 转到链接” 名 湖北职院 3我的电脑 a sample 丽]c1ass24.do MI crosoft F I inTernet m2收)21:34

二、设计案例： 设计文字跟踪光标效果的特效网页

程序代码如下: chtml> . spanstyle position:absolute visibility: visible top: -50px font-size: 10pt; font-family: Verdana font-weight: bold color: black Script>

程序代码如下： .spanstyle { position:absolute; visibility:visible; top:-50px; font-size:10pt; font-family:Verdana; font-weight:bold; color:black; }

var xy, 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-l; i++)( xpos[]=-50 var ypos=new Array for (i=0; i<=message length-1; i++)t ypos[]=-50

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(et x=(document layers)? e pageX document body. scrollLeft+event. client y =(document layers)?e pageY document body. scroll Top+event. client flag=l; function makesnakeo i 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 [o]=x+step ypos [] for(i=0: i<message length-1; i++)i var thisspan eval( span"+(i)+". style") thisspan.posLeft=xposlil thisspan.posTop=ypos[i]:

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]; }