บทความนี้อธิบายวิธีการของ JS+CSS เพื่อเลียนแบบฟังก์ชั่นการค้นหาอักขระเว็บของเบราว์เซอร์ แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <html>
<head>
<title> JS+CSS เลียนแบบฟังก์ชั่นการค้นหาตัวละครเว็บ </title>
<style type = text/css>
ร่างกาย {
ขนาดตัวอักษร: 12px; ระยะห่างของตัวอักษร: 1pt; ความสูงของสาย: 22px; ขอบซ้าย: 5pt; ขอบด้านบน: 5pt
-
#ScontentMain {
ความสูง: 30px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 28px; ความกว้าง: 228px
-
#ScontentBar {
ขอบด้านล่าง: สีดำ 1px แข็ง; ชายแดนซ้าย: สีดำ 1px แข็ง; ชายแดนขวา: สีดำ 1px แข็ง; ขอบด้านบน: สีดำ 1px ของแข็ง; เคอร์เซอร์: มือ; ความสูง: 15px; Padding-bottom: 1px; Padding-Left: 1px; Padding-Right: 1px; Padding-Top: 1px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 5px; ความกว้าง: 100%
-
#Scontentsub {
ตำแหน่ง: สัมบูรณ์; ด้านบน: 28px; ความกว้าง: 100%
-
A.A1: โฮเวอร์ {
ขอบด้านล่าง: #4A8FF2 1px Solid; ชายแดนซ้าย: #4A8FF2 1px Solid; Border-Right: #4A8FF2 1px Solid; ชายแดนด้านบน: #4A8FF2 1px Solid; ความสูงของสาย: 13pt; ความกว้าง: 83px; 12px;: 1869fe; จัดแนว: ศูนย์
-
A.A1: ลิงก์ {
สี: #ffffff; การตกแต่งข้อความ: ไม่มี; 12px; จัดตำแหน่ง: ศูนย์
-
td {
ขนาดตัวอักษร: 12px
-
.pos {
ตำแหน่ง: ญาติ
-
</style>
</head>
<body>
<br> จีน <br> jinzhou <br> อำลาสงครามโลกครั้งที่สอง <br> luo <br> Huang Loss <br> Jianghuai <br> BMW <br> การพูดเกินจริง <br> อเมริกา <br> Ajax <br> asp <br> java <br> jQuery
<ภาษาสคริปต์ = JavaScript>
var dragapproved = false
var zcor, xcor, ycor
ฟังก์ชั่น drag_onclick () {
if (search1.drag.checked == true) dragapproved = false
DragApproved อื่น = true
-
ฟังก์ชั่น movescontentMain () {
if (event.button == 1 && dragapproved && search1.drag.checked == true) {
zcor.style.pixelleft = tempvar1+event.clientx-xcor
zcor.style.pixeltop = tempvar2+event.clienty-mycor
leftPos = document.all.scontentmain.style.pixelleft-ontocument.body.scrollleft
toppos = document.all.scontentmain.style.pixeltop-document.body.scrolltop
กลับเท็จ
-
-
ฟังก์ชั่น dragscontentMain () {
if (! document.all)
กลับ
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 = ฟังก์ชั่นใหม่ ("dragapproved = false")
ฟังก์ชั่น AA (E)
-
if (e == 0) การแจ้งเตือน ("/n- = เพจค้นหาเอ็นจิ้น 1.0 =/n/n/n- เขียนรหัสบางส่วน/n- แก้ไขข้อบกพร่องของการกระโดดเมาส์ลาก/n- เลือกว่าจะลาก ... ");
กลับ;
-
ฟังก์ชั่น cose ()
-
ถ้า (ยืนยัน ("หน้าต่างนี้จะปิดเร็ว ๆ นี้หากคุณยืนยันโปรดกด OK! /N /N หากคุณต้องการเปิดหน้าต่างนี้อีกครั้งโปรดรีเฟรชหน้า")))
scontentmain.style.display = 'ไม่มี'
อื่น
scontentmain.style.display = ''
-
document.write ('<div id = "scontentmain"> <form name = "search1" onsubmit = "return findinpage (this.word.value);"> <div id = "Scontentbar"> คลิกที่ช่องทำเครื่องหมายด้านล่าง BorderColorlight = "#000000" BorderColordark = "#fffff" bgColor = "#0099cc" class = font1> <tr bgcolor = "#2d96ff"> <td colspan = "2" onfocus = window.document.search1.word.value = "" style = "background-image: url ()"> </td> </tr> <tr bgcolor = "#cccccc"> <td> href = "#top"> </a> </td> <td align = "center"> <อินพุต type = "ส่ง" ชื่อ = "ส่ง" value = "search"> </td> </tr> </form> </dable> </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 = 'ไม่มี'
อื่น
Scontentsub.style.display == ''
-
ฟังก์ชั่น Offdisplay () {
if (scontentsub.style.display == 'ไม่มี')
Scontentsub.style.display = ''
อื่น
Scontentsub.style.display == 'ไม่มี'
-
ฟังก์ชั่น staticize () {
w2 = document.body.scrollleft+ซ้าย pos
h2 = document.body.scrolltop+toppos
scontentmain.style.left = w2
scontentmain.style.top = h2
-
window.onscroll = staticize
ฟังก์ชั่น getWord ()
-
var tr
-
ฟังก์ชั่น findword (w)
-
สำหรับ (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 = "มองเห็นได้"
กลับมาจริง
-
กลับเท็จ
-
var candrag = 0, cangetword = 0
var oldtop = 0, oldscrolltop = 0
var wordExpln = อาร์เรย์ใหม่ ()
var g_xmlhttp
document.onmousemove = getWord
var ns4 = (document.layers);
var ie4 = (document.all);
var win = this;
var n = 0;
ฟังก์ชั่น findinpage (str)
-
var txt, ฉันพบ;
ถ้า (str == "")
กลับเท็จ;
ถ้า (NS4)
-
if (! win.find (str))
ในขณะที่ (win.find (str, false, true))
n ++;
อื่น
n ++;
ถ้า (n == 0) การแจ้งเตือน (str + "... ข้อความที่คุณกำลังมองหาไม่มีอยู่ /n /n โปรดพยายามป้อนคำหลักในหน้าและค้นหาอีกครั้ง! /n /n และโปรดระวังอย่าป้อน"? "หรือ": "เพื่อค้นหาด้วย !!!");
-
ถ้า (เช่น 4)
-
txt = win.document.body.createtextrange ();
สำหรับ (i = 0; i <= n && (found = txt.findtext (str))! = false; i ++)
-
txt.movestart ("ตัวละคร", 1);
txt.moveend ("textedit");
-
ถ้า (พบ)
-
txt.movestart ("ตัวละคร", -1);
txt.findtext (str);
txt.select ();
txt.scrollintoview ();
n ++; -
อื่น
-
ถ้า (n> 0)
-
n = 0;
FindInpage (STR);
-
อื่น
การแจ้งเตือน (str + "... ข้อความที่คุณกำลังมองหาไม่มีอยู่ /n /n โปรดลองป้อนคำหลักในหน้าและค้นหาอีกครั้ง! /n /n และโปรดระวังอย่าเข้า"? "หรือ": "เพื่อค้นหาด้วย !!!");
-
-
กลับเท็จ;
-
self.onerror = null;
currentx = currenty = 0;
ใด = null;
LastScrollx = 0; LastScrolly = 0;
ns = (document.layers)? 1: 0;
IE = (document.all)? 1: 0;
</script>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน