这篇文章主要介绍了 JS+CSS 实现模仿浏览器网页字符查找功能的方法, 实例分析了 javascript 实现查找功能的样式及相关技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
本文实例讲述了 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>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-= 页面搜索引擎 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 程序设计有所帮助。
来源: