This article illustrates the method of js+css to imitate the character lookup function of browser Web page. Share to everyone for your reference. The implementation methods are as follows:
<title>js+css Imitation of Web page character lookup function </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>
<body>
<br> China <br> Jinju <br> hundred War fatigue Heroes <br> <br> yellow loss <br> Jianghuai <br> BMW <br> hyperbole <br> American <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 = page Search Engine 1.0 = \n\n\n-Rewrite part of code \ n) modify mouse drag jump bug,\n-reserve option drag ...");
Return
}
function Cose ()
{
if (confirm) is about to close this window, please press OK if confirmed! \ n \ nplease refresh the page if you want to open this window again. "))
Scontentmain.style.display= ' None '
Else
Scontentmain.style.display= '
}
document.write (' <div id= ' Scontentmain "><form name=" Search1 "onsubmit=" return findinpage. Word.value); " ><div id= "Scontentbar" > Click the check box below to drag </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= "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= "search" Language=javascript onclick= "return Drag_onclick ()" > Use mouse to drag Windows <a href= "#top" ></A></TD><TD width= "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 '
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 + "...) The text you are looking for does not exist. \ n \ nplease try typing the keywords in the page and find them again! \ n and please note, don't put "? "or": "also enter the lookup!!! ");
}
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 + "...) The text you are looking for does not exist. \ n \ nplease try typing the keywords in the page and find them again! \ n and please note, don't put "? "or": "also enter the lookup!!! ");
}
}
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>
I hope this article will help you with your JavaScript programming.
