이 기사에서는 브라우저의 웹 문자 검색 기능을 모방하기위한 JS+CSS의 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<title> JS+CSS 모방 웹 문자 검색 함수 </title>
<스타일 유형 = 텍스트/CSS>
몸 {
글꼴 크기 : 12px; 글자 스페이스 : 1pt; 라인 높이 : 22px; 마진 좌파 : 5pt; 마진-탑 : 5pt
}
#ScontentMain {
높이 : 30px; 위치 : 절대; 상단 : 28px; 너비 : 228px
}
#ScontentBar {
국경-바닥 : 검은 색 1px 고체; 왼쪽 경계 : 검은 색 1px 고체; 경계 오른쪽 : 검은 색 1px 고체; 테두리 : 검은 색 1px 고체; 커서 : 손; 높이 : 15px; 패딩 바닥 : 1px; 왼쪽 패딩 : 1px; 패딩 권리 : 1px; 패딩 탑 : 1px; 위치 : 절대; 상단 : 5px; 너비 : 100%
}
#scontentsub {
위치 : 절대; 상단 : 28px; 너비 : 100%
}
A.A1 : 호버 {
국경-바닥 : #4A8ff2 1px 고체; 왼쪽 경계 : #4a8ff2 1px 고체; 경계 오른쪽 : #4A8ff2 1px 고체; 테두리 : #4A8ff2 1px 고체; 라인 높이 : 13pt; 너비 : 83px; 12px; : 1869fe; 정렬 : 센터
}
A.A1 : 링크 {
색상 : #ffffff; 텍스트 결정 : 없음; 12px; 정렬 : 센터
}
TD {
글꼴 크기 : 12px
}
.pos {
위치 : 상대
}
</스타일>
</head>
<body>
<br> 중국 <br> jinzhou <br> 세계 대전에 대한 작별 인사 <br> luo <br> huang 손실 <br> jianghuai <br> bmw <br> 아메리카 <br> ajax <br> asp <br> java <br> jquery
<스크립트 언어 = javaScript>
var dragpencroved = false
var zcor, xcor, ycor
함수 drag_onclick () {
if (search1.drag.checked == true) draspactroved = false
그렇지 않으면 드래그 승인 = true
}
함수 moveScontentMain () {
if (event.button == 1 && dragenproved && 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
거짓을 반환하십시오
}
}
함수 dragscontentMain () {
if (! document.all)
반품
if (event.srcelement.id == "ScontentBar") {
드래그 승인 = 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 함수 ( "dragpactroved = false")
기능 AA (E)
{
if (e == 0) Alert ( "/n- = 페이지 검색 엔진 1.0 =/n/n/n- 일부 코드를 다시 작성/n- 마우스 드래그 점프의 버그를 수정하십시오.
반품;
}
기능 cose ()
{
if (확인 ( "이 창이 곧 닫힙니다. 확인하면 확인을 누르십시오! /n /n이 창을 다시 열려면 페이지를 새로 고치십시오.")).
scontentmain.style.display = 'none'
또 다른
scontentmain.style.display = ''
}
document.write ( '<div id = "scontentmain"> <form name = "search1"onsubmit = "return findinpage (this.word.word.value);"> <div id = "scontentbar"> 아래 확인란을 클릭하고, </div> <div id = "scontentsub" "style ="0 셀 패드 딩 = "" "2 CellPacing =" "" "2 셀 패드 딩 = BorderColorlight = "#000000"BorderColorDark = "#fffff"bgcolor = "#0099cc"class = font1> <tr bgcolor = "#2d96ff"> <td colspan = "2"align = "center"> <input type = "text"size = "30"onchange = "n = 0;" onfocus = wind href = "#top"> </a> </a> </td> <td align = "center"> <input type = "제출"이름 = "제출"value = "검색"> </td> </tr> </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
함수 ondisplay () {
if (scontentsub.style.display == '')
scontentsub.style.display = 'none'
또 다른
scontentsub.style.display == ''
}
함수 offdisplay () {
if (scontentsub.style.display == 'none')
scontentsub.style.display = ''
또 다른
scontentsub.style.display == 'none'
}
함수 staticize () {
w2 = document.body.scrollleft+leftpos
h2 = document.body.scrolltop+toppos
scontentmain.style.left = w2
scontentmain.style.top = h2
}
Window.onscroll = 정적화
함수 getword ()
{
var tr
}
함수 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"
진실을 반환하십시오
}
거짓을 반환하십시오
}
var candrag = 0, cangetword = 0입니다
var OldTop = 0, OldScrollTop = 0
var WordExpln = 새로운 배열 ()
var g_xmlhttp
문서 .OnMousEmove = getword
var ns4 = (document.layers);
var IE4 = (document.all);
var win = 이것;
var n = 0;
기능 findinpage (str)
{
var txt, i, 발견;
if (str == "")
거짓을 반환합니다.
if (NS4)
{
if (! win.find (str))
win.find (str, false, true)
n ++;
또 다른
n ++;
if (n == 0) Alert (str + "... 당신이 찾고있는 텍스트가 존재하지 않습니다. /n /n 페이지의 키워드를 입력하고 다시 찾아보십시오! /n /n을 입력하지 않도록 조심하십시오"또는 ":": ":": ":");
}
if (IE4)
{
txt = win.document.body.creatextrange ();
for (i = 0; i <= n && (found = txt.findText (str))! = false; i ++)
{
txt.movestart ( "문자", 1);
txt.moveend ( "textedit");
}
if (발견)
{
txt.movestart ( "문자", -1);
txt.findtext (str);
txt.select ();
txt.scrollintoview ();
n ++; }
또 다른
{
if (n> 0)
{
n = 0;
findinpage (str);
}
또 다른
ALERT (str + "... 당신이 찾고있는 텍스트가 존재하지 않습니다. /n /n 페이지에서 키워드를 입력하고 다시 찾아보십시오! /n /n 그리고 입력하지 않도록 조심하십시오"또는 ":": ":": ":": ":");
}
}
거짓을 반환합니다.
}
self.onerror = null;
currentx = currenty = 0;
whatit = null;
LastScrollx = 0; LastScrolly = 0;
ns = (document.layers)? 1 : 0;
IE = (Document.all)? 1 : 0;
</스크립트>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.