JS+CSS实现模仿浏览器网页字符查找功能的方法
本文实例讲述了JS+CSS实现模仿浏览器网页字符查找功能的方法。分享给大家供大家参考。具体实现方法如下:
<html> <head> <title>JS+CSS模仿的网页字符查找功能</title> <styletype=text/css> BODY{ FONT-SIZE:12px;LETTER-SPACING:1pt;LINE-HEIGHT:22px;MARGIN-LEFT:5pt;MARGIN-TOP:5pt } #scontentmain{ HEIGHT:30px;POSITION:absolute;TOP:28px;WIDTH:228px } #scontentbar{ BORDER-BOTTOM:black1pxsolid;BORDER-LEFT:black1pxsolid;BORDER-RIGHT:black1pxsolid;BORDER-TOP:black1pxsolid;CURSOR:hand;HEIGHT:15px;PADDING-BOTTOM:1px;PADDING-LEFT:1px;PADDING-RIGHT:1px;PADDING-TOP:1px;POSITION:absolute;TOP:5px;WIDTH:100% } #scontentsub{ POSITION:absolute;TOP:28px;WIDTH:100% } A.a1:hover{ BORDER-BOTTOM:#4a8ff21pxsolid;BORDER-LEFT:#4a8ff21pxsolid;BORDER-RIGHT:#4a8ff21pxsolid;BORDER-TOP:#4a8ff21pxsolid;LINE-HEIGHT:13pt;WIDTH:83px;12px;:1869FE;align:center } A.a1:link{ COLOR:#ffffff;TEXT-DECORATION:none;12px;align:center } TD{ FONT-SIZE:12px } .pos{ POSITION:relative } </style> </head> <body> <br>中国<br>晋州<br>百战疲劳壮士哀<br>洛<br>黄损<br>江淮<br>宝马<br>夸张<br>美国<br>Ajax<br>ASP<br>JAVA<br>JQUERY <SCRIPTlanguage=JavaScript> vardragapproved=false varzcor,xcor,ycor functiondrag_onclick(){ if(search1.drag.checked==true)dragapproved=false elsedragapproved=true } functionmovescontentmain(){ if(event.button==1&&dragapproved&&search1.drag.checked==true){ zcor.style.pixelLeft=tempvar1+event.clientX-xcor zcor.style.pixelTop=tempvar2+event.clientY-ycor leftpos=document.all.scontentmain.style.pixelLeft-document.body.scrollLeft toppos=document.all.scontentmain.style.pixelTop-document.body.scrollTop returnfalse } } functiondragscontentmain(){ if(!document.all) return if(event.srcElement.id=="scontentbar"){ dragapproved=true zcor=scontentmain tempvar1=zcor.style.pixelLeft tempvar2=zcor.style.pixelTop xcor=event.clientX ycor=event.clientY document.onmousemove=movescontentmain } } document.onmousedown=dragscontentmain document.onmouseup=newFunction("dragapproved=false") functionaa(e) { if(e==0)alert("\n-=页面搜索引擎1.0=\n\n\n-重写了部分代码\n-修正鼠标拖动跳跃的bug,\n-保留选择可否拖动……"); return; } functioncose() { if(confirm("即将关闭此窗口,如确认请按确定!\n\n如要重开此窗口请刷新页面。")) scontentmain.style.display='none' else scontentmain.style.display='' } document.write('<divid="scontentmain"><formname="search1"onSubmit="returnfindInPage(this.Word.value);"><divid="scontentbar">点击下面复选框,按住此处拖动</div><divid="scontentsub""style="visibility:show"><tablewidth="228"border="1"cellpadding="2"cellspacing="0"bordercolorlight="#000000"bordercolordark="#FFFFFF"bgcolor="#0099CC"class=font1><trbgcolor="#2D96FF"><tdheight="2"colspan="2"align="center"><inputtype="text"name="Word"size="30"onChange="n=0;"onFocus=window.document.search1.Word.value=""style="background-image:url()"></td></tr><trbgcolor="#CCCCCC"><tdwidth="222"><inputtype="checkbox"name="drag"value="搜索"LANGUAGE=javascriptonclick="returndrag_onclick()">可用鼠标拖动窗口<ahref="#top"></a></td><tdwidth="61"align="center"><inputtype="submit"name="Submit"value="搜索"></td></tr></form></table></div></DIV>'); varw=document.body.clientWidth-450 varh=190 w+=document.body.scrollLeft h+=document.body.scrollTop varleftpos=w vartoppos=h scontentmain.style.left=w scontentmain.style.top=h functionondisplay(){ if(scontentsub.style.display=='') scontentsub.style.display='none' else scontentsub.style.display=='' } functionoffdisplay(){ if(scontentsub.style.display=='none') scontentsub.style.display='' else scontentsub.style.display=='none' } functionstaticize(){ w2=document.body.scrollLeft+leftpos h2=document.body.scrollTop+toppos scontentmain.style.left=w2 scontentmain.style.top=h2 } window.onscroll=staticize functionGetWord() { vartr } functionFindWord(w) { for(vari=0;i<WordList.options.length;i++) if(WordList.options[i].text==w) { WordList.options[i].selected=true Output.value=WordExpln[i] RESULT.style.visibility="visible" returntrue } returnfalse } varcanDrag=0,canGetWord=0 varoldtop=0,oldscrolltop=0 varWordExpln=newArray() varG_xmlHTTP document.onmousemove=GetWord varNS4=(document.layers); varIE4=(document.all); varwin=this; varn=0; functionfindInPage(str) { vartxt,i,found; if(str=="") returnfalse; if(NS4) { if(!win.find(str)) while(win.find(str,false,true)) n++; else n++; if(n==0)alert(str+"...您要找的文字不存在。\n\n请试着输入页面中的关键字再次查找!\n\n并且请注意,不要把“?”或“:”也输入查找!!!"); } if(IE4) { txt=win.document.body.createTextRange(); for(i=0;i<=n&&(found=txt.findText(str))!=false;i++) { txt.moveStart("character",1); txt.moveEnd("textedit"); } if(found) { txt.moveStart("character",-1); txt.findText(str); txt.select(); txt.scrollIntoView(); n++;} else { if(n>0) { n=0; findInPage(str); } else alert(str+"...您要找的文字不存在。\n\n请试着输入页面中的关键字再次查找!\n\n并且请注意,不要把“?”或“:”也输入查找!!!"); } } returnfalse; } self.onError=null; currentX=currentY=0; whichIt=null; lastScrollX=0;lastScrollY=0; NS=(document.layers)?1:0; IE=(document.all)?1:0; </SCRIPT> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。