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程序设计有所帮助。