jQuery尺寸.位置宽度
程序员文章站
2024-03-20 14:04:10
...
jQuery尺寸.位置宽度
1.1jQuery尺寸
| 语法 | 用法 |
|---|---|
| width（） | 获取元素的宽高 |
| innerWidth()/innerHieght() | 获取元素的宽高 包括padding |
| outerWidth()/outerHieght() | 获取元素的宽高 包括padding border |
| outerWidth(true)/outerHieght(true) | 获取元素的宽高 包括padding border margin |
以上参数为空，则是获取响应值，返回的是数字型
如果参数为数字，则是修改相应值
参数可以不必写单位
<style>
div{
width:200px;
height:200px;
background-color:pink;
padding:100px;
border:15px solid red;
margin:20px;
}
</style>
<body>
<div></div>
<script>
$(function(){
//1.width() height()获取设置元素 width和height大小
console.log($("div").width());
//2.innerWidth() /innerHeight() 获取设置元素 width和height + padding大小
console.log($("div").innerwidth());
//3.outerWidth() /outerWidth() 获取设置元素 width和height + padding +border大小
console.log($("div").outerwidth());
//4.outerWidth(true) /outerWidth(true) 获取设置元素 width和height + padding + border+ margin大小
console.log($("div").outerwidth(true));
})
</script>
</body>
1.2jQuery位置
位置主要有三个：offset().position().scrollTop()/scrollLeft()
- offset()设置或获取元素偏移
- offset()设置或返回元素被选元素相对于文档的偏移坐标，跟父级没有关系
- 该方法有两个属性left,top; offset().top用于获取距离文档顶部的距离；offset().left用于获取距离文档左侧的距离
- 可以设置元素的偏移：offset({top:10,left:30})
- position()获取元素偏移
- position()方法获取距离带有定位的父级（带有父级）的相对位置
- 这个方法只能获取，不能设置
- scrollTop()/scrollLeft设置获取元素被卷去的头部和左侧
- scrollTop()方法设置或返回被选元素被卷去的头部
<style>
.father{
width:400px;
height:400px;
background-color:pink;
margin:100px;
overflow:hidden;
position:relation;
}
.son{
width:150px;
height:150px;
background-color:purple;
position:absolute;
top:10px;
}
</style>
<div class="father">
<div class="son"></div>
</div>
<script>
$(function(){
//1.offset 获取元素距离文档的位置(偏移量)
consoloe.log($(".son").offset()); //返回值是一个对象
consoloe.log($(".son").offset().top);
$( )
//2. position 获取距离带有定位的父级位置 如果没有带有定位的父级，则以文档为准
consoloe.log($(".son").position());
//3.被卷去的头部scrollTop()
$(window).scroll(function(){
console.log($(document).scrollTop());
});
var boxTop = $(".box").offset().top;
//文档返回顶部
$(window).scroll(function(){
if($(document).scrollTop() >= boxTop){
//$(".back").show();
$(".back").fadeIn();
}else{
$(".back").fadeOut();
}
});
//页面加载直接跳到某个位置
$(document).scrollTop(100);
$(".back").click(function(){
//$(document).scrollTop(0);
$("body,html").stop().animate({
scrollTop:0
});
})
})
</script>
返回顶部案例优化–animate
animate动画函数里面有scrollTop属性，可以设置位置
但是是文档不能做动画，元素才能做动画，因此$(“body,html”).animate(scrollTop:0)
1.3案例：品优购电梯导航
当页面滚动到今日推荐模块，就让电梯导航显示出来
点击电梯导航相应内容，页面可以滚动到相应内容区域
因为电梯导航页面模块和内容区模块一以对应
当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
就可以吧animate要移动的距离求出来：当前索引好内容区域模块他的offset().Top
<style>
.fixedtool{
position:fixed;
top:100px;
left:50%;
margin-left:-676px;
width:66px;
background-color:#fff;
display:none;
}
.fixedtool{
height:32px;
line-height:32px;
text-align:center;
font-size:12px;
}
</style>
//电梯导航模块
<div class="fixedtool">
<ul>
<li class="current">家用电器</li>
<li>手机通讯</li>
<li>电脑办公</li>
<li>精品家具</li>
</ul>
</div>
<div class="floor">
<div class="jiayong w"></div>
<div class="shouji w"></div>
<div class="diannao w"></div>
<div class="jingpin w"></div>
</div>
<script scr="js/jQuery.min.js"></script>
<script>
//1.显示电梯导航
//【1.4案例优化】节流阀 互斥锁
var flag = true;
$(function(){
var toolTop = $(".recommend").offset().top;
toggleTool();
//封装一个函数，当页面在某个位置刷新的时候也能出现电梯导航
function toggleTool(){
if($(document).scrollTop() >= toolTop){
$(".fixedtool").fadeIn();
}else{
$(".fixedtool").fadeOut();
};
}
$(window).scroll(function(){
toggleTool();
//互斥锁
if(flag){
//【1.4案例】3.页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
$(".floor .w").each(function(i,ele){
if($(document).scrollTop() >= $(ele).offset().top){
$(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
}
})
}
});
//【1.3案例】2.点击电梯导航页面可以滚动到相应内容区域
$(".fixedtool li").click(function(){
//互斥锁
flag = false;
console.log($(this).index());
//当我们每次点击小li 就需要计算出页面要去往的位置
//选出对应索引号的内容区的盒子 计算他的.offset().top()
var current = $(".floor .w").eq($(this).index()).offset().top;
//页面动画滚动效果
//滚动之后执行回调函数，把互斥锁打开
$("body ,html").stop().animate({
scrollTop:current;
},function(){
flag = true;
});
//点击之后，让当前的小li 添加current 类名，姐妹移除current类名
//current类名是电梯导航的红色定位背景
$(this).addClass("current").siblings().removeClass()
})
})
</script>
1.4案例：品优购电梯导航
- 当我们点击电梯某个li，当前小li添加current类，兄弟移除类名
- 当页面滚动到内容区域模块，左侧电梯导航，相对应的小li模块，也会添加current类，兄弟移除current类
- 触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面
- 需要用到each,遍历内容区域大模块。each里面能拿到内容区域每一个模块元素和索引号
- 判断条件：被卷去的头部大于等于内容区域里面每个模块的offset().top
1.4案例优化
当我们点击电梯小li ,会发生页面滚动，页面滚动触发$(window).scroll(function(){}函数，该函数会进行一个给电梯导航小li添加current类名方法
解决：当我们点击小li时不需要执行页面滚动事件里面的给电梯导航添加current类名
是
节流阀：互斥锁
上一篇： 实验三顺序表
下一篇： C语言实现顺序表(静态)