自己做的网页页面导航浏览JS/JQuery

时间：2022-11-12 15:20:22
需求：

　　当页面是由一个巨大的表格构成时，浏览器自动会出现纵向和横向滚动条，这时用户浏览页面会出现很蛋疼的感受，那就是恶心的横向滚动条！

为了减缓这种蛋疼的感觉，我尝试做了这个导航器（不知道如何称呼），类似于地图右下角的缩略图，更形象的说是类似于“英雄联盟”的右下角小地图。

Demo:

点我Demo

大致原理：

根据鼠标在小地图区域的位置，成比例的放大到整个HTML页面中去。然后通过控制滚动条位置，实现页面移动。

更详细原理：

根据HTML页面的长宽比，在右下角创建相同比例的div,然后侦听该div的mouseover和mousemove事件，由此得到鼠标在

小地图中的x,y坐标（以小地图左上角为坐标原点）。再根据鼠标在小地图的位置成比例的放大到页面中，通过JQuery的

$("xxx").animate({scrollTop:123,scrollLeft:456},0)，设置滚动条距离顶端123px,左端456px,动画时间为0，即可达到

类似于手动拖拽的效果。（没有弹性回馈，有了更好玩）

主要JQuery函数： 

$().outerHeight()
    $().css()
    $().mouseover()
    $().mousemove()
    $().animate()

注：代码中的BirdSkan，翻译自中文“鸟瞰”图，后来觉得这个东西不符合“鸟瞰图”，而在文字叙述中国改为小地图，因为它
更类似于游戏“英雄联盟”或“百度地图”右下角的小地图。但代码中命名未改动，依旧是BirdSkan，其中Q是个人姓氏拼音。

效果图：

自己做的网页页面导航浏览JS/JQuery

自己做的网页页面导航浏览JS/JQuery

<!DOCTYPE html>
<html>
 <head>
  <title> 测试JS鸟瞰图 </title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="" type="text/css"  />
  <style type="text/css">
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form,
    fieldset, legend, input, button, textarea, p, th, td { margin: 0;padding: 0;    }
    p{margin:100px;    }
  </style>
     <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function(){

        //author: qilei
        //  date: 2014-04-15
        //  todo: 边缘需要优化

        var domEle = "body";            // .class  or  #id  or tagname, but 

        var birdSkanHeight,birdSkanWidth;
        var maxBSHeight = 250;
        var minBSHeight = 100;
        var maxBSWidth = 250;
        var minBSWidth = 100;

        var pageHeight = $("body").outerHeight();
        var pageWidth = $("body").outerWidth();

        var QBirdSkan = $("<div id='QBirdSkan'></div>");
        //根据页面比例确定鸟瞰图长宽
        var shape =  (pageHeight)/(pageWidth);
        if( shape > 1 || shape == 1 ){
            birdSkanHeight = maxBSHeight;
            birdSkanWidth = birdSkanHeight / shape;
            birdSkanWidth < minBSWidth ? birdSkanWidth  = minBSWidth : birdSkanWidth;//若计算出的宽度过小，用最小宽度代替
        }else{
            birdSkanWidth = maxBSWidth;
            birdSkanHeight = birdSkanWidth * shape;
            birdSkanHeight < minBSHeight ? birdSkanHeight = minBSHeight : birdSkanHeight;//同上
        }

        QBirdSkan.css("position","fixed");
        QBirdSkan.css("bottom","0");
        QBirdSkan.css("right","0");

        QBirdSkan.css("height",birdSkanHeight);
        QBirdSkan.css("width",birdSkanWidth);
        QBirdSkan.css("background-color","rgb(D3D3D3)");
        QBirdSkan.css("filter","alpha(opacity=20)");//IE，透明度20%
        QBirdSkan.css("-moz-opacity","0.8)");//Moz+FF,透明度20%
        QBirdSkan.css("opacity","0.2)");//支持CSS3的浏览器,透明度20%

        //设计美化
        QBirdSkan.css("border","solid 8px rgb(230,230,230) ");
        QBirdSkan.css("cursor","pointer");

        $("body").append(QBirdSkan);

        //添加鼠标移动相应函数
        QBirdSkan.mouseover(function(event){

            QBirdSkan.mousemove(function(event){
                //根据鸟瞰图中鼠标位置滚动页面位置
                var vRatio = event.offsetX / birdSkanWidth;
                var hRatio = event.offsetY / birdSkanHeight;

                var pageScrollTopVal = pageHeight * hRatio;
                pageScrollTopVal > pageHeight ? pageScrollTopVal = pageHeight : pageScrollTopVal;

                var pageScrollLeftVal = pageWidth * vRatio;
                pageScrollLeftVal > pageWidth ? pageScrollLeftVal = pageWidth : pageScrollLeftVal;

                $("html,body").animate({scrollTop:pageScrollTopVal,scrollLeft:pageScrollLeftVal},0);
            })

        });

    })

  </script>
 </head>

 <body>
    <div>

<p>1.鼠标进入有个矩形框，移动即移动页面</p>
<p>2.鼠标进入有个矩形框，移动即移动页面</p>

     <p>3.鼠标进入有个矩形框，移动即移动页面</p>
     <p>4.鼠标进入有个矩形框，移动即移动页面</p>

     <p>5.鼠标进入有个矩形框，移动即移动页面</p>

<p>6.鼠标进入有个矩形框，移动即移动页面</p>

<p>7.鼠标进入有个矩形框，移动即移动页面</p>

<p>8.鼠标进入有个矩形框，移动即移动页面</p>
<p>9.鼠标进入有个矩形框，移动即移动页面</p>

<p>10.鼠标进入有个矩形框，移动即移动页面</p>

<p>11.鼠标进入有个矩形框，移动即移动页面</p>

<p>12.鼠标进入有个矩形框，移动即移动页面</p>
<p>13.鼠标进入有个矩形框，移动即移动页面</p>

<p>14.鼠标进入有个矩形框，移动即移动页面</p>
<p>15.鼠标进入有个矩形框，移动即移动页面</p>

<p>16.鼠标进入有个矩形框，移动即移动页面</p>
<p>17.鼠标进入有个矩形框，移动即移动页面</p>
<p>18.鼠标进入有个矩形框，移动即移动页面</p>

<span>=====================================================</span>
<p>1.鼠标进入有个矩形框，移动即移动页面</p>

<p>2.鼠标进入有个矩形框，移动即移动页面</p>

<p>3.鼠标进入有个矩形框，移动即移动页面</p>

<p>4.鼠标进入有个矩形框，移动即移动页面</p>
<p>5.鼠标进入有个矩形框，移动即移动页面</p>

<p>6.鼠标进入有个矩形框，移动即移动页面</p>

    </div>
 </body>
</html>

相关文章