JS CSS实现模仿浏览器网页字符查找功能的方法

本文实例讲述了JS CSS实现模仿浏览器网页字符查找功能的方法。分享给大家供大家参考。具体实现方法如下：

复制代码 代码如下: JS+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 }

中国 晋州 百战疲劳壮士哀 洛 黄损 江淮 宝马 夸张 美国 Ajax ASP JAVA JQUERY 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- 重写了部分代码 - 修正鼠标拖动跳跃的bug， - 保留选择可否拖动……"); return; } function cose() { if(confirm("即将关闭此窗口，如确认请按确定！\n\n如要重开此窗口请刷新页面。")) scontentmain.style.display='none' else scontentmain.style.display='' } document.write(' 点击下面复选框，按住此处拖动 可用鼠标拖动窗口 '); 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=='none') scontentsub.style.display='' 否则 scontentsub.style.display=='无' } 函数静态化（）{ w2=document.body.scrollLeft leftpos h2=document.body.scrollTop toppos scontentmain.style.left=w2 scontentmain.style.top=h2 } window.onscroll=静态化 函数 GetWord() { var tr } 函数 FindWord(w) { for (var i=0;i if (WordList.options[i].text==w) { WordList.options[i].selected=true Output.value=WordExpln[i] RESULT.style.visibility="可见" 返回 true } 返回错误 } var canDrag=0,canGetWord=0 var oldtop=0,oldscrolltop=0 var WordExpln=new Array() var G_xmlHTTP document.onmousemove = GetWord var NS4 = (文档.层); var IE4 = (文档.all); var 赢=这个； var n = 0; 函数 findInPage(str) { var txt，i，找到； if (str == "") 返回假； 如果 (NS4) { if (!win.find(str)) while(win.find(str, false, true)) ; 否则 ; if (n == 0)alert(str " ...您要查找的文字不存在。 n请再次尝试输入页面中的关键字查找！同时请注意，不要把“？”或“：”也输入查找！！！"); } 如果（IE4） { txt = win.document.body.createTextRange(); for (i = 0; i { txt.moveStart("字符", 1); txt.moveEnd("文本编辑"); } 如果（找到） { txt.moveStart("字符", -1); txt.findText(str); txt.select(); txt.scrollIntoView(); ; } 否则 { 如果 (n > 0) { n = 0； findInPage(str); } 否则 alert(str "...您要查找的文字不存在。 n请再次尝试输入页面中的关键字查找！同时请注意，不要把“？”或“：”也输入查找！！！"); } } 返回假； } self.onError=null; 当前X = 当前Y = 0； 它 = null; 最后滚动X = 0;最后滚动Y = 0; NS = (文档.层) ? 1：0； IE = (文档.全部) ? 1：0； 希望本文对大家介绍的javascript程序设计有所帮助。

JS CSS实现模仿浏览器网页字符查找功能的方法_javascript技巧