页面搜索，仿照ctrl+F功能

<!--浮动框  开始-->
<div id="leftDiv" class="l1" style="left: 10px; top: 200px; right: 1048px;position:absolute">
        <table class="datalist">
            <tr>
                <td colspan="2" align="left" style="width: 111px; height: 35px;">
                    <input id="searchstr" class="textbox" name="searchstr" onkeydown="enter()" style="width: 178px;
                        height: 30px; font-size: medium">
                </td>
            </tr>
            <tr>
              <td align="left" style="height: 40px"><input class="sbttn" value="查找" type="button" id="btnSearch" /></td>
              <td align="center"> <span id="currNum" style="font-size: 18px; color: #CC0000; margin: 1px"></span><font
                        color="#0000CC"><span class="style70">/</span></font><span id="allNum" style="font-size: 16px;
                            font-weight: bold; margin: 1px"></span>
</td>
            </tr>
            <tr>
                <td width="83" align="left" style="height: 40px">
                    <input class="sbttn" value="上一处(↑)" type="button" id="btnPre"></td>
                <td align="left" width="85" ><input class="sbttn" value="下一处(↓)" type="button" id="btnNext" /></td>
            </tr>
        </table>
    </div>
    <!--浮动框  结束-->

 

 

<script type="text/javascript">
        function enter() {
            if (event.keyCode == 13) {
                document.getElementById('btnSearch').click();
            }
            if (event.keyCode == 40) {
                document.getElementById('btnNext').click();
            }
            if (event.keyCode == 38) {
                document.getElementById('btnPre').click();
            }
        }
        $(function() {
            //    GetAsixData();
            PosChanged();
            FoundNothing();
            $("#btnSearch").click(function() {
                FindTextPos();
            });
            $("#btnPre").click(function() {
                var offsest = 0;
                if (currPos == 0) {
                    currPos = resultArr.length - 1;
                    offsest = resultArr.length - 1;
                }
                else {
                    currPos--;
                    offsest = 1;
                }
                GoToPos(currPos, offsest);
            });
            $("#btnNext").click(function() {
                var offsest = 0;
                if (currPos == resultArr.length - 1) {
                    currPos = 0;
                    offsest = 0 - (resultArr.length - 1);
                }
                else {
                    currPos++;
                    offsest = -1;
                }
                GoToPos(currPos, offsest);
            });
 
        });
    </script>

 

 <script type="text/javascript">
        function getAbsPoint(e) {
            var x = e.offsetLeft;
            var y = e.offsetTop;
            while (e = e.offsetParent) {
                x += e.offsetLeft;
                y += e.offsetTop;
            }
            return { "x": x, "y": y };
        }
        function phplamp(e) {
            var xy = getAbsPoint(e);
            alert("offsetLeft=" + xy.x + "\noffsetTop=" + xy.y);
        }
 
        function phplampTest() {
            var xy = getAbsPoint(document.getElementById("btnTest"));
            alert("offsetLeft=" + xy.x + "\noffsetTop=" + xy.y);
        }
 
        function GetAsixData() {
 
            var text = "";
            text += "网页可见区域宽(document.documentElement.clientWidth):" + document.documentElement.clientWidth;
            text += "\n网页可见区域高(document.documentElement.clientHeight):" + document.documentElement.clientHeight;
            text += "\n网页可见区域宽(包括边线的宽)[document.documentElement.offsetWidth]:" + document.documentElement.offsetWidth;
            text += "\n网页可见区域高(包括边线的宽)[document.documentElement.offsetHeight]:" + document.documentElement.offsetHeight;
            text += "\n网页正文全文宽(document.documentElement.scrollWidth):" + document.documentElement.scrollWidth;
            text += "\n网页正文全文高(document.documentElement.scrollHeight):" + document.documentElement.scrollHeight;
            text += "\n网页被卷去的高(document.documentElement.scrollTop):" + document.documentElement.scrollTop;
            text += "\n网页被卷去的左(document.documentElement.scrollLeft):" + document.documentElement.scrollLeft;
            text += "\n网页正文部分上(window.screenTop):" + window.screenTop;
            text += "\n网页正文部分左(window.screenLeft):" + window.screenLeft;
            text += "\n屏幕分辨率的高(window.screen.height):" + window.screen.height;
            text += "\n屏幕分辨率的宽(window.screen.width):" + window.screen.width;
            text += "\n屏幕可用工作区高度(window.screen.availHeight):" + window.screen.availHeight;
            text += "\n屏幕可用工作区宽度(window.screen.availWidth):" + window.screen.availWidth;
            var objDiv = document.getElementById("leftDiv");
            text += "\nDiv的Top值(objDiv.style.top):" + objDiv.style.top;
            text += "\nDiv的高度(objDiv.style.height):" + objDiv.style.height;
            $("#txtArea").val(text);
        }
 
        $(function() {
 
            $("#btnTest").click(function() {
                var xy = getAbsPoint(document.getElementById("btnTest"));
                alert("offsetLeft=" + xy.x + "\noffsetTop=" + xy.y);
            });
 
            $(window).scroll(function() {
                //        GetAsixData();
                PosChanged();
 
            });
 
            $(window).resize(function() {
                //        GetAsixData();
                PosChanged();
 
            });
 
        });
 
        //全局变量定义
        //保存查询结果
        var resultArr = new Array();
        var currPos = -1;
        var foundColor = "ffffcc";
        var currColor = "ffcc00";
 
 
        function FindTextPos() {
            //        GetAsixData();
            var findText = document.getElementById("searchstr").value;
            if (jQuery.trim(findText) == "") {
                return;
            }
            var td;
            var tds = $("#mainData td");
            tds.each(function(index, element) {
                $(element).css("background-color", "");
            });
 
            var result = false;
            var tdVal = "";
            resultArr = new Array();
            for (var i = 1; i < tds.length; i++) {
                tdVal = $(tds[i]).text() + "";
                if (tdVal.indexOf(findText) > -1) {
                    //设置颜色
                    $(tds[i]).css("background-color", foundColor);
                    //保存到全局函数中
                    resultArr.push(tds[i]);
                    result = true;
                }
            }
            if (!result) {
                FoundNothing();
                alert("没有找到！");
            }
            else {
                currPos = 0;
                GoToPos(currPos, 0);
                FoundObj();
                //设置查询结果信息
                $("#allNum").text(resultArr.length + "");
                $("#currNum").text((currPos + 1) + "");
            }
        }
 
        //将对象显示在屏幕的中间醒目位置
        function GoToPos(index, offset) {
            //将原来的那个单元格颜色设为foundColor
            $(resultArr[index + offset]).css("background-color", "");
            $(resultArr[index + offset]).css("background-color", foundColor);
            $(resultArr[index]).css("background-color", currColor);
            $("#currNum").text((currPos + 1) + "");
 
            var xy = getAbsPoint(resultArr[index]);
            var oTop = xy.y;       //   获取对象的坐标X
            var oLeft = xy.x;      //   获取对象的坐标Y
            var sWidth = document.documentElement.clientWidth;      //    获取浏览器的宽度
            var sHeight = document.documentElement.clientHeight;    //    获取浏览器的高度
            window.scrollTo(0, oTop - (sHeight/ 2));
        }
        //当找到结果时
        function FoundObj() {
            $("#btnPre").removeAttr("disabled");
            $("#btnNext").removeAttr("disabled");
        }
        //当没有找到结果时
        function FoundNothing() {
            $("#btnPre").attr("disabled", "disabled");
            $("#btnNext").attr("disabled", "disabled");
            $("#allNum").text("0");
            $("#currNum").text("0");
        }
 
        //浮动框坐标位置固定
        function PosChanged() {
 
            var objDiv = document.getElementById("leftDiv");
            objDiv.style.top = document.documentElement.scrollTop + document.documentElement.offsetHeight - objDiv.style.height - 500;
            objDiv.style.left = document.documentElement.scrollLeft + 10;
        }
 
    </script>

 

<style>
<!--
.l1{ width:180px; height:120px; border:1px solid #d8d8d8; background-color:#f0f0ee; padding:10px;}
.datalist{ width:180px; height:120px; }
.sbttn{ width:80px; height:30px;}
-->
</style>