JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
本文实例讲述了JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单。分享给大家供大家参考，具体如下：
获取可视区尺寸和文档尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
console.log('可视区的宽度：'+$(window).width());
console.log('可视区的高度：'+$(window).height());
console.log('文档的高度：'+$(document).height());
console.log('文档的宽度：'+$(document).width());
})
</script>
</head>
<body>
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
</body>
</html>
可视区和文档的宽度是一样的，可视区和文档的高度不一样。
console.log('可视区的宽度：'+$(window).width());
console.log('可视区的高度：'+$(window).height());
console.log('文档的高度：'+$(document).height());
console.log('文档的宽度：'+$(document).width());
scrollLeft和scrollTop
置顶菜单
悬停菜单：
往下拉动滚动条的时候，如果菜单超出浏览器的可视区了，就悬停在浏览器上部
实现方法：
得到scrolltop的值，如果菜单出去了，就把菜单绝对定位在上部
position:'fixed', 固定定位
left:'50%', 和marginLeft一起使用，使菜单居中
top:0,
marginLeft:-480
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
margin: 0;
}
.banner{
width: 960px;
height: 200px;
background-color: cyan;
margin: 0 auto;
}
.menu{
width: 960px;
height: 100px;
background-color: gold;
margin: 0 auto;
text-align: center;
line-height: 80px;
}
p{
text-align: center;
color: red;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$menu=$('.menu');
$(window).scroll(function () {
var iNum=$(document).scrollTop();
// document.title=iNum;
if(iNum>200){
$menu.css({
position:'fixed',
left:'50%',
top:0,
marginLeft:-480
})
}
else {
$menu.css({
position:'static',
marginLeft:'auto'
})
}
})
})
</script>
</head>
<body>
<div class="banner"></div>
<div class="menu">菜单</div>
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
</body>
</html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>js</title> <script src="http://code.jquery.com/jquery-
-
jquery中获得元素尺寸和坐标的方法整理
一.获得坐标 1.offset() offset() 方法返回或设置匹配元素相对于文档的偏移(位置).(即视口坐标) 该方法返回的对象包含两个整型属性:top 和 left,以像素计. 此方法只对可见元素有效. 2.position() position() 方法返回匹配元素相对于父元素的位置(偏移).(相对于父元素的文档坐标) 该方法返回的对象包含两个整型属性:top 和 left,以像素计. 此方法只对可见元素有效. 3.offsetParent() offsetParent() 方法返回最
-
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
-
基于jquery实现图片相关操作（重绘、获取尺寸、调整大小、缩放）
本文为大家分享了四个jquery图片常见操作,供大家参考,具体内容如下 1.关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现. $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(
-
jQuery 拖动层(在可视区域范围内)
复制代码 代码如下: (function($){ $.fn.extend({ mydrag:function(){ var boxX = 0; //元素在页面中的横坐标 var boxY = 0; //元素在页面中的纵坐标 var dMouseX = 0; //按下鼠标时的鼠标所在位置的横坐标 var dMouseY = 0; //按下鼠标时的鼠标所在位置的纵坐标 var mMouseX = 0; //移动鼠标时的鼠标所在位置的横坐标 var mMouseY = 0; //移动鼠标时的鼠标所在位
-
JQuery获取元素尺寸、位置及页面滚动事件应用示例
本文实例讲述了JQuery获取元素尺寸.位置及页面滚动事件应用.分享给大家供大家参考,具体如下: 获取元素尺寸 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://libs.baidu.com/jquery/2.0.0/jqu
-
鼠标悬浮显示二级菜单效果的jquery实现
1.布局: <div class="show"> <img src="~/images/head_icon.png" /> <div class="drop" style=" display:none; z-index:80000" id="profileMenu"> <ul> <li> <a class="pass" s
-
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 复制代码 代码如下: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码 复制代码 代码如下: document.documentElement.clientWidth document.documentElement.cli
-
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
以便更好控制元素来满足我们的要求,那么我们可以通过outerHeight(options)和outerWidth(options)来获取到这部分的高度和宽度. outerHeight(options) 获取第一个匹配元素外部高度(默认包括补白和边框). 此方法对可见和隐藏元素均有效. 返回值:Integer 参数: options(Boolean) : (false) 设置为 true 时,计算边距在内. 示例: 获取第一段落外部高度. HTML 代码: <p>Hello</p>&
-
jQuery动画效果animate和scrollTop结合使用实例
CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). 复制代码 代码如下: $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 上面的代码表示滚动条跳到0的位置,页面移动速度是800.结合scrollTop实用示例: 复制代码
-
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候,一部分文档会从视线中消失.例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内.这意味着浏览器窗口的左上角和文档的左上角并不相同.如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner:而如果只是试图将元素的left和top位置设置为0,将