来源:ITPOW(www.itpow.com)
将代码置于网页 body 区的最后,这样可以在 FireFox 里得到更好的兼容。
在 IE 里额外支持拖动和浮动功能。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>查找框</title> <style type="text/css"> #findPanel { position:absolute; width:220px; border:1px solid #666666; } #findPanelTitle { height:10px; background-color:#336699; cursor:move; } #findPanelContent { padding:5px 5px 5px 5px; background-color:#6699CC; } </style> </head> <body> <div> <a href="http://www.itpow.com/" target="_blank">ITPOW www.itpow.com 专业探讨【ASP、JavaScript、XHTML+CSS、SQL Server】</a> <hr> </div> <div style="width:1000px;height:100px">页面内容</div> <div id="findPanel"> <div id="findPanelTitle"></div> <div id="findPanelContent"> <input type="text" size="20" value="a" id="key" onkeydown="javascript:ChckSubmit(event);"> <input type="button" value="查找" onclick="javascript:OnKeySubmit();"> </div> </div> <script language="javascript"> <!-- var findPanel = document.getElementById("findPanel"); var findPanelTitle = document.getElementById("findPanelTitle"); var findPanelContent = document.getElementById("findPanelContent"); var findPanel_orgnX = 50; var findPanel_orgnY = 50; //设置物件位置 findPanel.style.pixelLeft = document.body.scrollLeft + findPanel_orgnX; findPanel.style.pixelTop = document.body.scrollTop + findPanel_orgnY; //================================================================================ var foundCnt = 0; //已经找到了的结果的数量 //查找入口函数 function Find(key) { if (key == "") { return; } if (document.all) { IEFind(key); } else { NSFind(key); } } //浏览器为 IE 系列 function IEFind(key) { var rng = document.body.createTextRange(); var found = false; for (var i=0; i<=foundCnt && (found=rng.findText(key)); i++) { rng.moveStart("character", 1); //找到,后移一位以查找下一个 } if (found) { rng.moveStart("character", -1); rng.findText(key); rng.select(); rng.scrollIntoView(); foundCnt++; } else { if (foundCnt > 0) { //已经查找一遍,找到有符合条件的结果,重新开始查找 foundCnt = 0; IEFind(key); } else { //已经查找一遍,没有找到符合条件的结果 alert("文档搜索完毕。"); } } } //浏览器为 NS 系列 function NSFind(key) { if (window.find(key)) { foundCnt++; } else { var found = false; while (window.find(key, false, true)) { found = true; } if (found) { //已经查找一遍,找到有符合条件的结果,重新查找也已经开始 foundCnt = 1; } else { //已经查找一遍,没有找到符合条件的结果 alert("文档搜索完毕。"); } } } function OnKeySubmit() { var key = document.getElementById("key"); Find(key.value); } function ChckSubmit(e) { if (e.keyCode == 13) { OnKeySubmit(); } } //================================================================================ function RePosFindPanel() { findPanel.style.pixelLeft = document.body.scrollLeft + findPanel_orgnX; findPanel.style.pixelTop = document.body.scrollTop + findPanel_orgnY; } document.body.onscroll = RePosFindPanel; document.body.onresize = RePosFindPanel; //================================================================================ //拖拽过程中相关变量 var draging = false; //是否处于拖拽中 var offsetX = 0; //X方向左右偏移量 var offsetY = 0; //Y方向上下偏移量 //准备拖拽 function BeforeDrag() { if (event.button != 1) { return; } offsetX = document.body.scrollLeft + event.clientX-findPanel.style.pixelLeft; offsetY = document.body.scrollTop + event.clientY-findPanel.style.pixelTop; draging = true; } //拖拽中 function OnDrag() { if(!draging) { return; } //更新位置 findPanel_orgnX = event.clientX-offsetX; findPanel_orgnY = event.clientY-offsetY; event.returnValue = false; findPanel.style.pixelLeft = document.body.scrollLeft + event.clientX-offsetX; findPanel.style.pixelTop = document.body.scrollTop + event.clientY-offsetY; } //结束拖拽 function EndDrag() { if (event.button != 1) { return; } draging = false; } findPanelTitle.onmousedown = BeforeDrag; document.onmousemove = OnDrag; findPanelTitle.onmouseup = EndDrag; //--> </script> </body> </html>[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
创建于2005年 渝ICP备05010272号-1
电邮:cftea@126.com