需求:

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

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

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是个人姓氏拼音。

效果图:

<!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>

自己做的网页页面导航浏览JS/JQuery的更多相关文章

  1. 自己做的网页页面导航浏览JS/JQuery_版本2(优化边缘)

    版本2增加了宽宽的边界,边界内鼠标也可以导航.边界对应这HTML页面的边界.目前右下角有时会导致功能失效.版本1. 这次找了个更好的例子,实践中产生这个需求的真实例子,点我Demo. 需求: 版本1: ...

  2. 慕课网中网页定位导航中js相关问题总结

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  3. 页面打印(js/jquery)

    1.js实现(可实现局部打印)  <html> <title>js打印</title> <head></head><body>  ...

  4. JS一般般的网页重构可以使用Node.js做些什么(转)

    一.非计算机背景前端如何快速了解Node.js? 做前端的应该都听过Node.js,偏开发背景的童鞋应该都玩过. 对于一些没有计算机背景的,工作内容以静态页面呈现为主的前端,可能并未把玩过Node.j ...

  5. 手机端网页技术--使自己做的asp.net网页适应手机浏览

    使自己做的asp.net网页适应手机浏览 特别提醒: 对于文本框和其他控件,无法自适应,只有纯粹的文本和table的单元格可以自适应,其他的只有设置为具体的宽度,或者在一个表格中(本来在电脑中显示一行 ...

  6. 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  7. 如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  8. WPF MeasureOverride和 ArrangeOverride做个 页面导航

    public class NavigationPanel:Panel { protected override Size MeasureOverride(Size availableSize) { S ...

  9. HTML5设计网页熔岩灯导航(navigation bar)插件 已经加上完整源代码

    导航栏(navigation bar): 1.指位于页眉区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接博客的各个页面的作用. 2.网页设计中不可缺少的部分,它是指通过一定的技术手段,为 ...

随机推荐

  1. codevs 2149 矩形周长(暴力扫描线)

    /* 暴力应该很好理解 不多说了 至于线段树维护的嘛 还没看懂 哪天突然想明白了在写吧 */ #include<iostream> #include<cstdio> #incl ...

  2. JS(一)

    额, 写了一堆, 待机win8崩溃, 重启之后只剩光秃秃的界面, 以后再填吧, 下次一定要一口气把博客写完,中间不能放下干其他事. 1.对象,以及对象与方法联合: var bob = new Obje ...

  3. C#--Session用完如何清除

    Session.Abandon();//清除全部Session//清除某个SessionSession["UserName"] = null;Session.Remove(&quo ...

  4. Unity3D GUI之自定义风格组件

    GUI中可以使用一些默认的组件,里面的最后一个参数一般情况下,不设置就是默认的 ,当然也可以进行手动的指定,比如: GUI.Button(new Rect(0,0,100,100),"开始游 ...

  5. MVC ViewEngine视图引擎解读及autofac的IOC运用实践

    MVC 三大特色  Model.View.Control ,这次咱们讲视图引擎ViewEngine 1.首先看看IViewEngine接口的定义 namespace System.Web.Mvc { ...

  6. Asp.net MVC利用Ajax.BeginForm实现bootstrap模态框弹出,并进行前段验证

    1.新建Controller public ActionResult Index() { return View(); } public ActionResult Person(int? id) { ...

  7. 在window系统下配置login.sql

    在window系统下配置login.sql 他的位置是登录用户的文件夹,我的win7系统位置是: C:\Users\Administrator 我的login.sql下载地址: http://file ...

  8. (转载)css垂直水平居中的整理

    方法一 .demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; ...

  9. Devexpress Barmanager设置

    一,在bar的属性中有optionbar,可以做一些设置. 其中比较有用的是:1,去掉最右边的箭头:allowquickcustomization 改为false 2,去掉最左边的竖线:drawdra ...

  10. MVC Unit Testing学习笔记

    MVC Unit Testing 参考文档: 1.http://www.asp.net/mvc/overview/testing 2.http://www.asp.net/mvc/tutorials/ ...