JS+CSS實現(xiàn)模仿瀏覽器網(wǎng)頁字符查找功能的方法
更新時間：2015年02月26日 15:53:33 作者：代碼家園
這篇文章主要介紹了JS+CSS實現(xiàn)模仿瀏覽器網(wǎng)頁字符查找功能的方法,實例分析了javascript實現(xiàn)查找功能的樣式及相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS+CSS實現(xiàn)模仿瀏覽器網(wǎng)頁字符查找功能的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復制代碼 代碼如下:
<html>
<head>
<title>JS+CSS模仿的網(wǎng)頁字符查找功能</title>
<style type=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: 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%
}
#scontentsub {
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>中國<br>晉州<br>百戰(zhàn)疲勞壯士哀<br>洛<br>黃損<br>江淮<br>寶馬<br>夸張<br>美國<br>Ajax<br>ASP<br>JAVA<br>JQUERY
<SCRIPT language=JavaScript>
var dragapproved=false
var zcor,xcor,ycor
function drag_onclick() {
if (search1.drag.checked == true ) dragapproved=false
else dragapproved=true
}
function movescontentmain(){
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
return false
}
}
function dragscontentmain(){
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=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("即將關(guān)閉此窗口，如確認請按確定！\n\n如要重開此窗口請刷新頁面。"))
scontentmain.style.display='none'
else
scontentmain.style.display=''
}
document.write('<div id="scontentmain"><form name="search1" onSubmit="return findInPage(this.Word.value);"><div id="scontentbar">點擊下面復選框，按住此處拖動</div><div id="scontentsub"" 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()" ></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
scontentmain.style.left=w
scontentmain.style.top=h
function ondisplay(){
if (scontentsub.style.display=='')
scontentsub.style.display='none'
else
scontentsub.style.display==''
}
function offdisplay(){
if (scontentsub.style.display=='none')
scontentsub.style.display=''
else
scontentsub.style.display=='none'
}
function staticize(){
w2=document.body.scrollLeft+leftpos
h2=document.body.scrollTop+toppos
scontentmain.style.left=w2
scontentmain.style.top=h2
}
window.onscroll=staticize
function GetWord()
{
var tr
}
function FindWord(w)
{
for (var i=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"
return true
}
return false
}
var canDrag=0,canGetWord=0
var oldtop=0,oldscrolltop=0
var WordExpln=new Array()
var G_xmlHTTP
document.onmousemove = GetWord
var NS4 = (document.layers);
var IE4 = (document.all);
var win = this;
var n = 0;
function findInPage(str)
{
var txt, i, found;
if (str == "")
return false;
if (NS4)
{
if (!win.find(str))
while(win.find(str, false, true))
n++;
else
n++;
if (n == 0) alert(str + " ... 您要找的文字不存在。\n \n請試著輸入頁面中的關(guā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請試著輸入頁面中的關(guā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>
<head>
<title>JS+CSS模仿的網(wǎng)頁字符查找功能</title>
<style type=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: 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%
}
#scontentsub {
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>中國<br>晉州<br>百戰(zhàn)疲勞壯士哀<br>洛<br>黃損<br>江淮<br>寶馬<br>夸張<br>美國<br>Ajax<br>ASP<br>JAVA<br>JQUERY
<SCRIPT language=JavaScript>
var dragapproved=false
var zcor,xcor,ycor
function drag_onclick() {
if (search1.drag.checked == true ) dragapproved=false
else dragapproved=true
}
function movescontentmain(){
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
return false
}
}
function dragscontentmain(){
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=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("即將關(guān)閉此窗口，如確認請按確定！\n\n如要重開此窗口請刷新頁面。"))
scontentmain.style.display='none'
else
scontentmain.style.display=''
}
document.write('<div id="scontentmain"><form name="search1" onSubmit="return findInPage(this.Word.value);"><div id="scontentbar">點擊下面復選框，按住此處拖動</div><div id="scontentsub"" 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()" ></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
scontentmain.style.left=w
scontentmain.style.top=h
function ondisplay(){
if (scontentsub.style.display=='')
scontentsub.style.display='none'
else
scontentsub.style.display==''
}
function offdisplay(){
if (scontentsub.style.display=='none')
scontentsub.style.display=''
else
scontentsub.style.display=='none'
}
function staticize(){
w2=document.body.scrollLeft+leftpos
h2=document.body.scrollTop+toppos
scontentmain.style.left=w2
scontentmain.style.top=h2
}
window.onscroll=staticize
function GetWord()
{
var tr
}
function FindWord(w)
{
for (var i=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"
return true
}
return false
}
var canDrag=0,canGetWord=0
var oldtop=0,oldscrolltop=0
var WordExpln=new Array()
var G_xmlHTTP
document.onmousemove = GetWord
var NS4 = (document.layers);
var IE4 = (document.all);
var win = this;
var n = 0;
function findInPage(str)
{
var txt, i, found;
if (str == "")
return false;
if (NS4)
{
if (!win.find(str))
while(win.find(str, false, true))
n++;
else
n++;
if (n == 0) alert(str + " ... 您要找的文字不存在。\n \n請試著輸入頁面中的關(guā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請試著輸入頁面中的關(guā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>
希望本文所述對大家的javascript程序設計有所幫助。
相關(guān)文章
這篇文章主要介紹了javascript判斷firebug是否開啟的方法,結(jié)合實例形式分析了javascript基于console控制臺方法判斷firebug開啟狀態(tài)的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
JavaScript中Array實例方法map的實現(xiàn)方法
這篇文章主要介紹了JavaScript中Array實例方法map的實現(xiàn)方法,map() 方法創(chuàng)建一個新數(shù)組,其結(jié)果是原數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-03-03
返回頂部功能在很多的網(wǎng)站上都有，判斷滾動參數(shù)動態(tài)顯示與隱藏，下面的示例很實用，喜歡的朋友可以收藏下2014-10-10
用js實現(xiàn)每隔一秒刷新時間的實例(含年月日時分秒)
下面小編就為大家?guī)硪黄胘s實現(xiàn)每隔一秒刷新時間的實例(含年月日時分秒)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了Node.js API詳解之 zlib模塊用法,結(jié)合實例形式分析了Node.js API中zlib模塊基本功能、函數(shù)使用方法與操作注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了深入學習JS?XML和Fetch請求，文章通過圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了詳解javascript中的babel到底是什么，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
函數(shù)就是對象，而函數(shù)名是指向函數(shù)對象的指針，不會與某個函數(shù)綁定2011-12-12
這篇文章主要為大家介紹了無constructor的class類是否還能new的問題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
如果你的項目要用到 JavaScript，而你不使用任何 JavaScript 框架，那么對于那些常用且各個瀏覽器明顯不同的地方就需要用函數(shù)來封裝起來。2010-03-03