この記事では、ブラウザのWeb文字検索機能を模倣するJS+CSSの方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします:<html>
<head>
<Title> JS+CSS模倣Web文字検索機能</title>
<style type = text/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 solid;国境左:#4a8ff2 1pxソリッド;境界線右:#4A8FF2 1PXソリッド;ボーダートップ:#4a8ff2 1pxソリッド; Line-Height:13pt;幅:83px; 12px;:1869fe; align:センター
}
A.A1:リンク{
色:#ffffff;テキスト装置:なし; 12px; align:center
}
TD {
フォントサイズ:12px
}
.pos {
位置:相対
}
</style>
</head>
<body>
<br>中国<br> jinzhou <br>第一次世界大戦への別れ<br> luo <br> huang loss <br> jianghuai <br> bmw <br> agaghation <br> ajax <br> asp <br> java <br> jquery
<スクリプト言語= javascript>
var dragapproved = false
var zcor、xcor、ycor
関数drag_onclick(){
if(seart1.drag.checked == true)dragapproved = false
else dragapproved = true
}
function movescontentmain(){
if(event.button == 1 && dragApproved && seart1.drag.checked == true){
zcor.style.pixelleft = tempvar1+event.clientx-xcor
zcor.style.pixeltop = tempvar2+event.clienty-cor
leftpos = document.all.scontentmain.style.pixelleft-document.body.scrollleft
toppos = document.all.scontentmain.style.pixeltop-document.body.scrolltop
falseを返します
}
}
関数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 = new Function( "dragapproved = false")
関数AA(E)
{
if(e == 0)alert( "/n- =ページ検索エンジン1.0 =/n/n/n-いくつかのコード/n-マウスドラッグジャンプのバグを修正、/n-ドラッグするかどうかを選択し続ける...");
戻る;
}
function cose()
{
if(確認( "このウィンドウはすぐに閉じられます。確認する場合は、このウィンドウを再開したい場合はOK! /n /nを押してください。ページを更新してください。」)
scontentmain.style.display = 'none'
それ以外
scontentmain.style.display = ''
}
document.write( '<div id = "scontentmain"> <form name = "seart1" onsubmit = "return findinpage(this.word.value);"> <div id = "scontentbar">下のチェックボックスをクリックして、ドラッグしてドラッグします</div> <div div = "scontentsub" "スタイル=" bordercolorlight = "#000000" bordercolordark = "#fffff" bgcolor = "#0099cc" class = font1> <tr bgcolor = "#2d96ff"> <td colspan = "2" align = "center"> <inputタイプ= "" onfocus = window.document.search1.word.value = "" style = "background-image:url()"> </td> </tr> <tr bgcolor = "#cccccc"> <td> <inputタイプ= "チェックボックス" name = "drag value =" search "reath" with drag_onclick href = "#top"> </a> </td> <td align = "center"> <input type = "submit" name = "submit" value = "search"> </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'
それ以外
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
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"
trueを返します
}
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;
関数findinpage(str)
{
var txt、私は見つかりました。
if(str == "")
falseを返します。
if(ns4)
{
if(!win.find(str))
while(win.find(str、false、true))
n ++;
それ以外
n ++;
if(n == 0)alert(str + "...探しているテキストは存在しません。 /n /nページにキーワードを入力して、もう一度調べてみてください! /n /n、入力しないように注意してください"または ":"
}
if(ie4)
{
txt = win.document.body.createTextrange();
for(i = 0; i <= n &&(fund = txt.findtext(str))!= false; i ++)
{
txt.movestart( "Character"、1);
txt.moveend( "textedit");
}
if(見つかった)
{
txt.movestart( "Character"、-1);
txt.findtext(str);
txt.select();
txt.scrollintoview();
n ++; }
それ以外
{
if(n> 0)
{
n = 0;
findinpage(str);
}
それ以外
アラート(str + "...探しているテキストは存在しません。 /n /nページにキーワードを入力して、もう一度調べてみてください!
}
}
falseを返します。
}
self.onerror = null;
currentX = currenty = 0;
whusit = null;
lastscrollx = 0; lastscrolly = 0;
ns =(document.layers)? 1:0;
ie =(document.all)? 1:0;
</script>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。