JavaScript模仿網頁的字符查找功能_瀏覽器特效

JavaScript模仿網頁的字符查找功能，也就是打開網頁按下“Ctrl+F”的效果，如果字符不至一個，則會依次向下搜索或向上搜索，搜索框可以拖動，可以借此學習一下JS的字符控制功能。

<html>
<head>
<title>JavaScript模仿網頁的字符查找功能</title>
<style type=text/css> 
BODY { 
FONT-SIZE: 12px; LETTER-SPACING: 1pt; LINE-HEIGHT: 22px; MARGIN-LEFT: 5pt; MARGIN-TOP: 5pt 
} 
#smrcmain { 
HEIGHT: 30px; POSITION: absolute; TOP: 28px; WIDTH: 228px 
} 
#smrcbar { 
BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; CURSOR: hand; HEIGHT: 15px; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px; POSITION: absolute; TOP: 5px; WIDTH: 100% 
} 
#smrcsub { 
POSITION: absolute; TOP: 28px; WIDTH: 100% 
} 
A.a1:hover { 
BORDER-BOTTOM: #4a8ff2 1px solid; BORDER-LEFT: #4a8ff2 1px solid; BORDER-RIGHT: #4a8ff2 1px solid; BORDER-TOP: #4a8ff2 1px solid; 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>mb5u.com<br>mb5u.com<br>模板無憂<br>模板無憂<br>模板無憂<br>mb5u.com<br>模板無憂<br>mb5u.com<br>mb5u.com<br>Ajax中<br>模板無憂<br>模板無憂<br>Ajax中國<br>模板無憂<br>
<SCRIPT language=JavaScript> 
var dragapproved=false 
var zcor,xcor,ycor 
function drag_onclick() { 
if (search1.drag.checked == true ) dragapproved=false 
else dragapproved=true 
} 
function movesmrcmain(){ 
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.smrcmain.style.pixelLeft-document.body.scrollLeft 
toppos=document.all.smrcmain.style.pixelTop-document.body.scrollTop 
return false 
} 
} 
function dragsmrcmain(){ 
if (!document.all) 
return 
if (event.srcElement.id=="smrcbar"){ 
dragapproved=true 
zcor=smrcmain 
tempvar1=zcor.style.pixelLeft 
tempvar2=zcor.style.pixelTop 
xcor=event.clientX 
ycor=event.clientY 
document.onmousemove=movesmrcmain 
} 
} 
document.onmousedown=dragsmrcmain 
document.onmouseup=new Function("dragapproved=false") 
function aa(e) 
{ 
if (e==0) alert("\n-　　= 頁面搜索引擎 1.0 = \n\n\n- 重寫了部分代碼\n- 修正鼠標拖動跳躍的bug，\n- 保留選擇可否拖動……"); 
return; 
} 
function cose() 
{ 
if(confirm("即將關閉此窗口，如確認請按確定！\n\n如要重開此窗口請刷新頁面。")) 
smrcmain.style.display='none' 
else 
smrcmain.style.display='' 
} 
///
document.write('<div id="smrcmain"><form name="search1" onSubmit="return findInPage(this.Word.value);"><div id="smrcbar"> <map name="Map"><area shape="rect" coords="20,0,40,20" alt="最大化" onclick="offdisplay()"><area shape="rect" coords="0,0,20,20" alt="最小化" onclick="ondisplay()"><area shape="rect" shape="rect" coords="34,0,60,19" alt="關閉" onclick="cose()"></map></div><div id="smrcsub"" style="visibility: show"><table width="228" border="1" cellpadding="2" cellspacing="0" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#0099CC" class=font1><tr bgcolor="#2D96FF"><td height="2" colspan="2" align="center"><input type="text" name="Word" size="30" onChange="n = 0;" onFocus=window.document.search1.Word.value="" style="background-image: url(http://www.jzzy.com/./photo/address0415.gif)" ></td></tr><tr bgcolor="#CCCCCC"><td width="222"> <input type="checkbox" name="drag" value="搜索" LANGUAGE=javascript onclick="return drag_onclick()">可用鼠標拖動窗口 <a href="#top"></a></td><td width="61" align="center"><input type="submit" name="Submit" value="搜索"></td></tr></form></table></div></DIV>'); 
var w=document.body.clientWidth-450 
var h=190 
w+=document.body.scrollLeft 
h+=document.body.scrollTop 
var leftpos=w 
var toppos=h 
smrcmain.style.left=w 
smrcmain.style.top=h 
function ondisplay(){ 
if (smrcsub.style.display=='') 
smrcsub.style.display='none' 
else 
smrcsub.style.display=='' 
} 
function offdisplay(){ 
if (smrcsub.style.display=='none') 
smrcsub.style.display='' 
else 
smrcsub.style.display=='none' 
} 
function staticize(){ 
w2=document.body.scrollLeft+leftpos 
h2=document.body.scrollTop+toppos 
smrcmain.style.left=w2 
smrcmain.style.top=h2 
} 
window.onscroll=staticize

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 并且請注意，不要把“？”或“：”也輸入查找！！！"); 
} 
} 
return false; 
}

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>

所屬頻道：瀏覽器特效/更新時間：2013-04-20

[收藏][報錯][返回列表]

相關瀏覽器特效：

JavaScript模仿網頁的字符查找功能_瀏覽器特效

瀏覽器特效Rss訂閱特效代碼搜索

瀏覽器特效推薦

猜你也喜歡看這些