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


Posted in Javascript onFebruary 26, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
JS打印组合功能
Aug 04 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
vue+node+webpack环境搭建教程
Nov 05 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 #Javascript
js使用post 方式打开新窗口
Feb 26 #Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 #Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 #Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 #Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 #Javascript
js随机生成网页背景颜色的方法
Feb 26 #Javascript
You might like
如何使用PHP往windows中添加用户
2006/12/06 PHP
php读取数据库信息的几种方法
2008/05/24 PHP
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
PHP链表操作简单示例
2016/10/15 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
python生成随机密码或随机字符串的方法
2015/07/03 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
财务部出纳岗位职责
2013/12/22 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
万能检讨书
2015/01/27 职场文书
经销商会议开幕词
2016/03/04 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server