正文
自己做的网页页面导航浏览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文件位置。
