自己做的网页页面导航浏览JS/JQuery
需求:
当页面是由一个巨大的表格构成时,浏览器自动会出现纵向和横向滚动条,这时用户浏览页面会出现很蛋疼的感受,那就是恶心的横向滚动条!
为了减缓这种蛋疼的感觉,我尝试做了这个导航器(不知道如何称呼),类似于地图右下角的缩略图,更形象的说是类似于“英雄联盟”的右下角小地图。
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的更多相关文章
- 自己做的网页页面导航浏览JS/JQuery_版本2(优化边缘)
版本2增加了宽宽的边界,边界内鼠标也可以导航.边界对应这HTML页面的边界.目前右下角有时会导致功能失效.版本1. 这次找了个更好的例子,实践中产生这个需求的真实例子,点我Demo. 需求: 版本1: ...
- 慕课网中网页定位导航中js相关问题总结
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- 页面打印(js/jquery)
1.js实现(可实现局部打印) <html> <title>js打印</title> <head></head><body> ...
- JS一般般的网页重构可以使用Node.js做些什么(转)
一.非计算机背景前端如何快速了解Node.js? 做前端的应该都听过Node.js,偏开发背景的童鞋应该都玩过. 对于一些没有计算机背景的,工作内容以静态页面呈现为主的前端,可能并未把玩过Node.j ...
- 手机端网页技术--使自己做的asp.net网页适应手机浏览
使自己做的asp.net网页适应手机浏览 特别提醒: 对于文本框和其他控件,无法自适应,只有纯粹的文本和table的单元格可以自适应,其他的只有设置为具体的宽度,或者在一个表格中(本来在电脑中显示一行 ...
- 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件
为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...
- 如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
- WPF MeasureOverride和 ArrangeOverride做个 页面导航
public class NavigationPanel:Panel { protected override Size MeasureOverride(Size availableSize) { S ...
- HTML5设计网页熔岩灯导航(navigation bar)插件 已经加上完整源代码
导航栏(navigation bar): 1.指位于页眉区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接博客的各个页面的作用. 2.网页设计中不可缺少的部分,它是指通过一定的技术手段,为 ...
随机推荐
- codevs 2149 矩形周长(暴力扫描线)
/* 暴力应该很好理解 不多说了 至于线段树维护的嘛 还没看懂 哪天突然想明白了在写吧 */ #include<iostream> #include<cstdio> #incl ...
- JS(一)
额, 写了一堆, 待机win8崩溃, 重启之后只剩光秃秃的界面, 以后再填吧, 下次一定要一口气把博客写完,中间不能放下干其他事. 1.对象,以及对象与方法联合: var bob = new Obje ...
- C#--Session用完如何清除
Session.Abandon();//清除全部Session//清除某个SessionSession["UserName"] = null;Session.Remove(&quo ...
- Unity3D GUI之自定义风格组件
GUI中可以使用一些默认的组件,里面的最后一个参数一般情况下,不设置就是默认的 ,当然也可以进行手动的指定,比如: GUI.Button(new Rect(0,0,100,100),"开始游 ...
- MVC ViewEngine视图引擎解读及autofac的IOC运用实践
MVC 三大特色 Model.View.Control ,这次咱们讲视图引擎ViewEngine 1.首先看看IViewEngine接口的定义 namespace System.Web.Mvc { ...
- Asp.net MVC利用Ajax.BeginForm实现bootstrap模态框弹出,并进行前段验证
1.新建Controller public ActionResult Index() { return View(); } public ActionResult Person(int? id) { ...
- 在window系统下配置login.sql
在window系统下配置login.sql 他的位置是登录用户的文件夹,我的win7系统位置是: C:\Users\Administrator 我的login.sql下载地址: http://file ...
- (转载)css垂直水平居中的整理
方法一 .demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; ...
- Devexpress Barmanager设置
一,在bar的属性中有optionbar,可以做一些设置. 其中比较有用的是:1,去掉最右边的箭头:allowquickcustomization 改为false 2,去掉最左边的竖线:drawdra ...
- MVC Unit Testing学习笔记
MVC Unit Testing 参考文档: 1.http://www.asp.net/mvc/overview/testing 2.http://www.asp.net/mvc/tutorials/ ...