1.获取和设置元素的尺寸
获取尺寸
.box{ width: 300px; height: 200px; background-color: antiquewhite; margin: 50px; padding: 10px; border: 1px solid #000; }
2.获取元素相对页面的绝对位置:offset()
$(function(){
var div = $('.box'); div.click(function(){ var oPos = $('.box').offset(); /*获取页面绝对位置*/ /*console.log(oPos);*/ document.title = oPos.left + '|' + oPos.top; /*更改标签*/ }) })
例子:购物车
购物车
.car{ /*购物车*/ width: 150px; height: 50px; border: 2px solid #000; line-height: 50px; text-align: center; float: right; margin: 50px 100px 0 0; } .car em{ /*购物车商品数量*/ font-style: normal; color: red; font-weight: bold; /*设置文本粗细,bold加粗*/ } .btn{ /*加入购物车按钮*/ width: 100px; height: 50px; background-color: #F32914; border: 0; color: #fff; margin: 50px 0 0 100px; float: left; } .point{ /*小圆点*/ width: 16px; height: 16px; background-color: gold; border-radius: 8px; position: fixed; left: 0; top: 0; z-index: 100; display: none; }购物车0
3.获取浏览器可视宽度高度
4.获取页面文档的宽度高度
$(function(){
/可视区屏幕范围/
console.log('可视区宽度:'+$(window).width());
console.log('可视区高度:'+$(window).height());
/实际文本范围/
console.log('text区宽度:'+$(document).width());
console.log('text区高度:'+$(document).height());
})**5.获取页面滚动距离**/页面滚动距离/
console.log('上滚动距离:'+$(document).scrollTop());
console.log('左滚动距离:'+$(document).scrollLeft());**6.页面滚动事件**
滚动菜单
.blank{ width: 900px; height: 300px; background-color: aqua; margin: 0 auto; } .menu{ width: 900px; height: 100px; background-color: antiquewhite; margin: 0 auto; text-align: center; line-height: 100px; /*opacity: 0.3;*/ } .menu_back{ width: 900px; height: 100px; margin: 0 auto; display: none; } p{ color: red; margin: 0 auto; text-align: center; } .arrow{ width: 60px; height: 60px; background-color: #000000; position: fixed; right: 30px; bottom: 50px; text-align: center; line-height: 60px; font-size: 40px; border-radius: 30px; opacity: 0.5; cursor: pointer; display: none; } .arrow:hover{ opacity: 1; }
上一篇:jQuery属性操作、循环
下一篇:jQuery特性效果与链式调用
相关内容