Skip to content

Commit 2047c59

Browse files
LinJingOKLinJingOK
committed
jQuery元素的位置
1 parent 9db3e36 commit 2047c59

File tree

5 files changed

+859
-7
lines changed

5 files changed

+859
-7
lines changed

‎jQuery学习/03-jquery事件/07-jQuery元素位置.html

+11-7
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
<title>Title</title>
66
<script src="jquery.min.js"></script>
77
<style>
8+
body {
9+
margin: 0;
10+
}
811
.father {
912
width: 400px;
1013
height: 400px;
@@ -30,18 +33,19 @@
3033
</div>
3134
<script>
3235
//1.获取设置距离文档的位置（偏移） offset
33-
console.log($(".father").offset());
34-
console.log($(".father").offset().top);
36+
console.log($(".son").offset());
37+
console.log($(".son").offset().top); //自己的bug:由于为设置body的margin为0 所以left=108
3538
//改变偏移
36-
// $(".son").offset({
37-
// top: 200,
38-
// left: 200
39-
// });
39+
$(".son").offset({
40+
top: 200,
41+
left: 200
42+
});
4043
console.log($(".son").offset());
4144
console.log($(".son").offset().top);
4245

4346
//2.获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级 则以文档为准
44-
// console.log($(".son").position())
47+
//这个方法只能获取 不能设置偏移
48+
console.log($(".son").position())
4549
</script>
4650
</body>
4751
</html>

‎jQuery学习/03-jquery事件/08-jQuery被卷去的头部.html

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset = "UTF-8">
5+
<title>Title</title>
6+
<script src="jquery.min.js"></script>
7+
<style>
8+
div {
9+
width: 80%;
10+
height: 2000px;
11+
}
12+
.back {
13+
position: fixed;
14+
width: 50px;
15+
height: 50px;
16+
background-color: pink;
17+
right: 30px;
18+
bottom: 100px;
19+
display: none;
20+
}
21+
.container {
22+
width: 900px;
23+
height: 500px;
24+
background-color: skyblue;
25+
margin: 400px auto;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<div class="back">返回顶部</div>
31+
<div class="container"></div>
32+
<script>
33+
$(function() {
34+
// $(document).scrollTop(100); //直接设置数值，实现刷新就在某个位置上
35+
//被卷去的头部 scrollTop() 被卷去的左侧 scrollLeft()
36+
//页面滚动事件
37+
var boxTop = $(".container").offset().top;
38+
$(window).scroll(function () {
39+
// console.log($(document).scrollTop());
40+
if ($(document).scrollTop() >= boxTop) {
41+
$(".back").fadeIn(); //显示
42+
}else {
43+
$(".back").fadeOut(); //隐藏
44+
}
45+
})
46+
47+
//返回顶部
48+
$(".back").click(function () {
49+
// $(document).scrollTop(0);
50+
//上面的方法可以实现 但是快速 需要缓慢回到顶部 加动画
51+
$("body, html").stop().animate({
52+
scrollTop: 0
53+
});
54+
})
55+
})
56+
</script>
57+
</body>
58+
</html>

‎jQuery学习/04-品优购案例/13-链式编程.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset = "UTF-8">
5+
<title>Title</title>
6+
<script src="jquery.min.js"></script>
7+
</head>
8+
<body>
9+
你好啊
10+
<button>按钮</button>
11+
<button>按钮</button>
12+
<button>按钮</button>
13+
<button>按钮</button>
14+
<button>按钮</button>
15+
<script>
16+
$(function () {
17+
//1.隐式迭代 给所有的按钮都绑定了点击事件
18+
$("button").click(function () {
19+
// //2.让当前元素颜色变为红色
20+
// $(this).css("color", "red");
21+
// //3.让其余的兄弟元素不变色
22+
// $(this).siblings().css("color","");
23+
24+
//链式编程
25+
//我的颜色为红色 我的兄弟颜色为空
26+
// $(this).css("color", "red").siblings().css("color","");
27+
28+
//我的兄弟变为红色 我本身不变色
29+
$(this).siblings().css("color","blue"); //问题是 只能点一次
30+
31+
//我兄弟的爸爸body变成粉红色
32+
// $(this).siblings().parent().css("color","pink")
33+
34+
})
35+
})
36+
</script>
37+
</body>
38+
</html>

‎jQuery学习/04-品优购案例/index.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
$(function () {
2+
//发现问题： 当我们点击了小li 此时不需要执行页面滚动事件里面的li的背景选择 添加current
3+
//解决方法 节流阀 互斥锁
4+
var flag = true;
5+
//1.显示隐藏电梯导航
6+
var toolTop = $(".recommand").offset().top;
7+
toggleTool();
8+
9+
function toggleTool() {
10+
if ($(document).scrollTop() >= toolTop) {
11+
$(".fixedtool").fadeIn();
12+
}else {
13+
$(".fixedtool").fadeOut();
14+
}
15+
}
16+
$(window).scroll(function () {
17+
toggleTool();
18+
//3.页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
19+
if (flag) {
20+
$(".floor .w").each(function (i, ele) {
21+
if ($(document).scrollTop() >= $(ele).offset().top) {
22+
console.log(i);
23+
$(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
24+
}
25+
})
26+
}
27+
});
28+
//2.点击电梯导航页面可以滚动到相应内容区域
29+
$(".fixedtool li").click(function () {
30+
flag = false;
31+
console.log($(this).index());
32+
//当我们每次点击小li 就需要计算出页面要去往的位置
33+
//选出对应索引号的内容区域的盒子 计算他的.offset().top
34+
var current = $(".floor .w").eq($(this).index()).offset().top;
35+
//页面动画滚动效果
36+
$("body,html").stop().animate({
37+
scrollTop: current
38+
},function () {
39+
flag = true;
40+
});
41+
//点击之后 让当前小li 添加current类名 ，其他兄弟移除current类名
42+
$(this).addClass("current").siblings().removeClass();
43+
44+
});
45+
});
46+

0 commit comments

Comments
 (0)