自己做的网页页面导航浏览JS/JQuery_版本2（优化边缘）

版本2增加了宽宽的边界，边界内鼠标也可以导航。边界对应这HTML页面的边界。目前右下角有时会导致功能失效。版本1。

这次找了个更好的例子，实践中产生这个需求的真实例子，点我Demo。

需求：

版本1：

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

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

版本2：

新增的边界，是因为在实际使用时，用户盯着的是页面，不是小地图。所以当用户鼠标“不自觉”的移动到左边界时，用户还想顺着

　　左边界往上看，而这时鼠标早已移除小地图了（而用户并不知道！），他只能扭头去看小地图，重新移动鼠标，这是很蛋疼的事情，毕竟

　　我的显示器这么大，扭个头很费劲的。模拟笔记本电脑的触控板的实体边界，我觉得应该加个较宽的过渡区，在过渡区内依然可以移动页面，

　　不过是有限的移动，即在边界上的移动，方便用户浏览页面边界部分。

大致原理：

版本1：

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

版本2：

版本1中小地图只是一个div，版本2中增加了边界，是由外div嵌套内div实现的，设计边界是为了方便用户更好的浏览页面的边界，否则很

鼠标很容易移出小地图而自己感觉不到。

更详细原理：

版本1：

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

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

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

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

版本2：

　　由于出现2个div嵌套，内div是浮在外div上的，所以本应该只是内div捕获的鼠标的mouseover和mousemove事件默认会冒泡

　　给外div，外div的mousemove中捕获mousemove的坐标会“奇怪”的变成内div鼠标mousemove事件的坐标，因为外div捕获的其实是

　　内div的mousemove的event，这个event里面的坐标自然也是以内div为坐标系的，所以当鼠标在内div移动时，外div的mousemove

　　的回调函数中捕获的offsetX会是错误的。

　　所以，我们需要禁止掉自动的冒泡，这在 JQuery 中很容易：在内 div 的 mouseover 和 mousemove 的事件函数末尾

　　加上 return false; 即可。这样 外div 就类似于一个 空心的 四方形面包圈，当鼠标在 内div 中移动时，它是接收不到任何鼠标事件的。

　　外div的边界很自然的被划分为Left,Right,Top,Bottom，仅可以上下，上下，左右，左右移动。原理类似内div。

主要JQuery函数：

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

注：

代码说明：

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

Demo说明：

　　Demo即是一个完整例子，直接粘贴到记事本或你的EditPlus中，注意例子中需要修改<scritp>标签，输入正确的jquery文件位置。

其它说明：

　　这个小地图其实还可以进一步做成：把当前HTML页面截图后，真正的类似于LOL中的小地图。若不用服务器支持，纯JS截图的话，

　　很难（但是也有方法）实现，具体可参考这里：《知乎：js能否实现截图，截图之后的图片数据再下载到本地》。

主要的JS代码

   <script type="text/javascript">
     $(document).ready(function(){

         //author: qilei
         //  date: 2014-04-15
         //  使用2个Div，外Div包含内Div
         //  内Div作为触控板
         //  外Div作为边界回馈（虽然此区域内光标已经移出触控板，但也提供上下左右控制）

         //用户定义参数区
         var diy_border_width = 30;

         //max 250*250   min 100*100
         var maxBSHeight = 250;
         var minBSHeight = 100;
         var maxBSWidth = 250;
         var minBSWidth = 100;

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

         var QBirdSkan = $("<div id='QBirdSkan'></div>");
         var QContainer = $("<div id='QContainer'></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;//同上
         }

         QContainer.css("position","fixed");
         QBirdSkan.css("position","absolute");

         if(birdSkanHeight > birdSkanWidth){                //采用最大值作为外Div正方形边长
             QContainer.css("height",birdSkanHeight + 2 * diy_border_width);
             QContainer.css("width",birdSkanHeight + 2 * diy_border_width);

             QBirdSkan.css("bottom",diy_border_width);
             QBirdSkan.css("right", (birdSkanHeight + 2 * diy_border_width - birdSkanWidth) / 2 );
         }else{
             QContainer.css("height",birdSkanWidth + 2 * diy_border_width);
             QContainer.css("width",birdSkanWidth +  2 * diy_border_width);

             QBirdSkan.css("bottom",(birdSkanWidth + 2 * diy_border_width - birdSkanHeight) / 2);
             QBirdSkan.css("right", diy_border_width );
         }

         QContainer.css("bottom","0");
         QContainer.css("right","0");
         QContainer.css("background-color","#E3E3E3");
         QContainer.css("filter","alpha(opacity=20)");//IE，透明度20%
         QContainer.css("-moz-opacity","0.8)");//Moz+FF,透明度20%
         QContainer.css("opacity","0.2)");//支持CSS3的浏览器,透明度20%

         //鸟瞰图样式
         QBirdSkan.css("height",birdSkanHeight);
         QBirdSkan.css("width",birdSkanWidth);
         QBirdSkan.css("background-color","#BBB");
         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("cursor","pointer");

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

         //鼠标在BirdSkan区
         QBirdSkan.mouseover(function(){

             QBirdSkan.mousemove(function(event){
                 //根据鸟瞰图中鼠标位置滚动页面位置

                 var cursorDivPosX = event.offsetX;
                 var cursorDivPosY = event.offsetY;

                 //console.log("鸟瞰图中===" + cursorDivPosX );

                 //var cursorDivPosX = event.offsetX - 40 < 0 ? 0 : event.offsetX - 20;
                 //var cursorDivPosY = event.offsetY - 40 < 0 ? 0 : event.offsetY - 20;
                 var vRatio = cursorDivPosX / birdSkanWidth;
                 var hRatio = cursorDivPosY / 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);

                 return false;
                 //阻止mousemove事件冒泡
                 //这样鼠标在BirdSkanDiv内move时，Container的mousemove不会被触发，保证二者独立
             });

             return false;//阻止mouseover事件冒泡
             //这样Container就成了一个空心圈，鼠标over于BirdSkanDiv时，Container感觉不到，保证二者独立

         });
         //上面2个return false是为了保证下面的event.offsetX获取正确的坐标
         //Container和BirdSkan两个div才可以计算各自的offsetX,Y

         //鼠标在外Div区
         QContainer.mouseover(function(){
             QContainer.mousemove(function(event){

                 var cursorDivPosX = event.offsetX;
                 var cursorDivPosY = event.offsetY;

                 var leftAreaX = (birdSkanHeight + 2 * diy_border_width - birdSkanWidth) / 2;    //左区域的最右端X坐标
                 var pageScrollTopVal,pageScrollLeftVal;

                 //console.log(cursorDivPosX);

                 //Left Area
                 if(cursorDivPosX < leftAreaX){

                     pageScrollLeftVal = 0;

                     var hRatio = (cursorDivPosY - diy_border_width) / birdSkanHeight;
                     pageScrollTopVal = pageHeight * hRatio;
                     pageScrollTopVal > pageHeight ? pageScrollTopVal = pageHeight : pageScrollTopVal;

                 }

                 //Right Area
                 if(cursorDivPosX > (birdSkanHeight + 2 * diy_border_width + birdSkanWidth) / 2 ){

                     pageScrollLeftVal = pageWidth;

                     var hRatio = (cursorDivPosY - diy_border_width) / birdSkanHeight;
                     pageScrollTopVal = pageHeight * hRatio;
                     pageScrollTopVal > pageHeight ? pageScrollTopVal = pageHeight : pageScrollTopVal;

                 }

                 //Top Area
                 if(cursorDivPosY < diy_border_width ){
                     pageScrollTopVal = 0;
                     var vRatio = (cursorDivPosX - leftAreaX) / birdSkanWidth;
                     pageScrollLeftVal = pageWidth * vRatio;
                     pageScrollLeftVal > pageWidth ? pageScrollLeftVal = pageWidth : pageScrollLeftVal;

                 }

                 //Bottom Area
                 if(cursorDivPosY > diy_border_width + birdSkanHeight){
                     pageScrollTopVal = pageHeight;
                     var vRatio = (cursorDivPosX - leftAreaX) / birdSkanWidth;
                     pageScrollLeftVal = pageWidth * vRatio;
                     pageScrollLeftVal > pageWidth ? pageScrollLeftVal = pageWidth : pageScrollLeftVal;
                 }

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

             })
         });

     })

   </script>

Demo即是一个完整例子，直接粘贴到记事本或你的EditPlus中，注意例子中需要修改<scritp>标签，输入正确的jquery文件位置。