自己做的网页页面导航浏览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.网页设计中不可缺少的部分,它是指通过一定的技术手段,为 ...
随机推荐
- Unity3D 游戏的碰撞
首先创建两个精灵,然后都绑定上碰撞方法(这个是在上一篇文章的基本上): 不过 要注意一点就是碰撞器需要挂一个重力组件,不然无效 所以添加了差不多就能够实现物体碰撞了: 接下来技术写代码,让碰撞的时候进 ...
- C#Socket编程socket.Connect权限出错问题及解决
最近使用Vs2010编写Socket程序,客户端在调用socket.Connect()时,总是出现: 请求“System.Net.SocketPermission, System, Version=4 ...
- 如何通过WiFi来进行Android的真机模拟
我们知道,在使用模拟机模拟的时候会出现较多的问题,所以如果有一部Android手机的话进行真机模拟是极好的. 准备工作: 第一种方法:使用数据线,具体操作百度.略(非WIFI操作的真机模拟) 第二方法 ...
- 惠普 Compaq 6520s 无线开关打不开
问题描述:键盘上面的无线开关怎么按都打不开,始终是出于黄色的状态 解决方法:尝试恢复bios默认值测试: 开机不停点击F10进入bios,选择File选项,选择Restore Defaults-- ...
- Linux 添加epel源
1.epel-release yum install epel-release 这样有些没办法通过yum 安装 可以这样安装(例如redis)
- String 方法
import java.lang.*; /** * 1.查找"asdfjvjadsffvaadfkfasaffdsasdffadsafafsafdadsfaafd" * 该字符串中 ...
- Linux数据写操作改进
Linux的IO操作中数据的写函数int nwrite = write(int fd,void* buf ,int len)表示向fd文件描述符写入len个字节长度的数据报文,但是这并不能保证真正向内 ...
- php之图片处理类缩略图加水印
用到两个image系统函数 imagecopymerge — 拷贝并合并图像的一部分 imagecopyresampled — 重采样拷贝部分图像并调整大小 /* 如何知道图片的大小和类型 无法确认调 ...
- JQUERY 键盘事件
一 一.首先需要知道的是: 1.keydown()keydown 事件会在键盘按下时触发. 2.keypress()keypress 事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键. 3. ...
- [Android分享] 彻底理解ldpi、mdpi、hdpi、xhdpi、xxhdpi
来自: http://www.eoeandroid.com/thread-565562-1-1.html?_dsign=42bed080 非常感谢楼主分享 这个问题我相信困惑了好多人包括很多老鸟,而且 ...