您的位置：首页 > Web前端 > CSS
JS+CSS实现模仿浏览器网页字符查找功能的方法

2015-02-26 00:00 941 查看
本文实例讲述了JS+CSS实现模仿浏览器网页字符查找功能的方法。分享给大家供大家参考。具体实现方法如下：
<html>

<head>

<title>JS+CSS模仿的网页字符查找功能</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> 

</head>

<body>

<br>中国<br>晋州<br>百战疲劳壮士哀<br>洛<br>黄损<br>江淮<br>宝马<br>夸张<br>美国<br>Ajax<br>ASP<br>J***A<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-　　= 页面搜索引擎 1.0 = \n\n\n- 重写了部分代码\n- 修正鼠标拖动跳跃的bug，\n- 保留选择可否拖动……"); 

return; 

} 

function cose() 

{ 

if(confirm("即将关闭此窗口，如确认请按确定！\n\n如要重开此窗口请刷新页面。")) 

scontentmain.style.display='none' 

else 

scontentmain.style.display='' 

} 

document.write('<div id="scontentmain"><form name="search1" onSubmit="return findInPage(this.Word.value);"><div id="scontentbar">点击下面复选框，按住此处拖动</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="30" 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="搜索" LANGUAGE=javascript onclick="return drag_onclick()">可用鼠标拖动窗口 <a href="#top"></a></td><td width="61" align="center"><input type="submit" name="Submit" value="搜索"></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 + " ... 您要找的文字不存在。\n \n请试着输入页面中的关键字再次查找！\n \n 并且请注意，不要把“？”或“：”也输入查找！！！"); 

} 

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 + "... 您要找的文字不存在。\n \n请试着输入页面中的关键字再次查找！\n \n 并且请注意，不要把“？”或“：”也输入查找！！！"); 

} 

} 

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>

</html>
希望本文所述对大家的javascript程序设计有所帮助。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航