تصف هذه المقالة طريقة JS+CSS لتقليد وظيفة البحث عن أحرف الويب الخاصة بالمتصفح. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز كما يلي: <html>
<head>
<title> js+css وظيفة البحث عن حرف الويب المقلدة </title>
<نوع النمط = text/css>
جسم {
حجم الخط: 12 بكسل ؛ تباعد الرسائل: 1pt ؛ رفع الخط: 22px ؛ الهامش اليساري: 5pt ؛ الهامش: 5pt
}
#ScontentMain {
الارتفاع: 30 بكسل ؛ الموقف: مطلق ؛ أعلى: 28 بكسل ؛ العرض: 228 بكسل
}
#ScontentBar {
الحدود القاع: أسود 1 بكسل الصلبة. الحدود اليسرى: أسود 1 بكسل الصلبة. اليمين الحدودي: أسود 1 بكسل صلب. أعلى الحدود: أسود 1 بكسل الصلبة. المؤشر: اليد. الارتفاع: 15 بكسل ؛ حشوة القاع: 1 بكسل ؛ حشو اليسار: 1 بكسل ؛ حشو اليمين: 1px ؛ حشو أعلى: 1 بكسل ؛ الموقف: مطلق ؛ أعلى: 5 بكسل ؛ العرض: 100 ٪
}
#Scontentsub {
الموقف: مطلق ؛ أعلى: 28 بكسل ؛ العرض: 100 ٪
}
A.A1: Hover {
Border-Bottom: #4A8FF2 1PX Solid ؛ الحدود اليسرى: #4A8FF2 1PX الصلبة ؛ اليمين الحدودي: #4A8FF2 1PX الصلبة ؛ أعلى الحدود: #4A8FF2 1PX الصلبة ؛ Line-Eight: 13pt ؛ العرض: 83px ؛ 12px ؛: 1869fe ؛ محاذاة: المركز
}
A.A1: Link {
اللون: #ffffff ؛ تدمير النص: لا شيء ؛ 12px ؛ محاذاة: المركز
}
td {
حجم الخط: 12 بكسل
}
.pos {
الموقف: قريب
}
</style>
</head>
<body>
<br> الصين <br> jinzhou <br> وداعًا للحرب العالمية <br> luo <br> خسارة huang <br> jianghuai <br> bmw <br> مبالغة <br> أمريكا <br> ajax <br> asp <br> java <br> jquery
<لغة البرنامج النصي = javaScript>
var dragapproved = false
var Zcor ، xcor ، ycor
وظيفة drag_onclick () {
إذا (search1.drag.checked == true) dragapproved = false
آخر dragapproved = صحيح
}
وظيفة 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-conduple.body.scrollleft
toppos = document.all.scontentMain.style.pixeltop-document.body.scrolltop
العودة كاذبة
}
}
وظيفة DragScontentMain () {
إذا (! document.all)
يعود
if (event.srclement.id == "Scontentbar") {
dragapproved = صحيح
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)
{
إذا كان (E == 0) ALERT ("/n- = محرك بحث الصفحة 1.0 =/n/n/n- أعد كتابة بعض التعليمات البرمجية/n- إصلاح خلل السحب الماوس ،/n- استمر في تحديد ما إذا كان يجب سحب ...") ؛
يعود؛
}
وظيفة cose ()
{
إذا (تأكيد ("سيتم إغلاق هذه النافذة قريبًا. إذا تأكدت ، يرجى الضغط على موافق! /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"> انقر فوق خانة الاختيار أدناه ، ومكمّن وسحب </div> <div id = "scontentsub" BorderColorlight = "#000000" BorderColorDark = "#fffff" bgcolor = "#0099CC" class = font1> <tr bgcolor = "#2d96ff"> <td colspan = "2" align = "center"> <pection type = "text" size "size =" 30 " onfocus = window.document.search1.word.value = "" style = "background-image: url ()"> </td> </tr> HREF = "#TOP"> </a> </td> <td align = "center"> <input type = "pridt"
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 () {
إذا (scontentsub.style.display == '')
scontentsub.style.display = "لا شيء"
آخر
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 = 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]
النتيجة.
العودة الحقيقية
}
العودة كاذبة
}
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 ؛
وظيفة FindInPage (STR)
{
var txt ، أنا ، وجدت ؛
إذا (str == "")
العودة كاذبة
إذا (NS4)
{
إذا (! win.find (str))
بينما (win.find (str ، false ، true))
n ++ ؛
آخر
n ++ ؛
إذا كان (n == 0) تنبيه (str + "... النص الذي تبحث عنه غير موجود. /n /n ، فيرجى محاولة إدخال الكلمات الرئيسية في الصفحة والبحث مرة أخرى! /n /n ويرجى أن تحرصوا على عدم الدخول"؟ "أو": "للعثور أيضًا !!!") ؛
}
إذا (IE4)
{
txt = win.document.body.createTexTrange () ؛
لـ (i = 0 ؛ i <= n && (تم العثور عليه = txt.findtext (str))! = false ؛ i ++)
{
txt.movestart ("الحرف" ، 1) ؛
txt.moveend ("textedit") ؛
}
إذا (وجدت)
{
txt.movestart ("الحرف" ، -1) ؛
txt.findtext (str) ؛
txt.select () ؛
txt.scrollintoview () ؛
n ++ ؛ }
آخر
{
إذا (n> 0)
{
ن = 0 ؛
FindInPage (str) ؛
}
آخر
ALERT (STR + "... النص الذي تبحث عنه غير موجود. /n /n يرجى محاولة إدخال الكلمات الرئيسية في الصفحة والبحث مرة أخرى! /n /n ويرجى أن تكون حريصًا على عدم الدخول"؟ "أو": "للعثور أيضًا !!!") ؛
}
}
العودة كاذبة
}
self.onerror = null ؛
currentx = currenty = 0 ؛
أيها = فارغ ؛
lastScrollx = 0 ؛ lastScrolly = 0 ؛
ns = (document.layers)؟ 1: 0 ؛
ie = (document.all)؟ 1: 0 ؛
</script>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.