七夕项目js实现-3-1

3-1布局的自适应动态调整

前言

​ 本节他主要想实现的效果是,不管你的浏览器窗口有多大,都能将小男孩定位到路的中间。就像他写的那个公式,小男孩头顶距离窗口顶部的距离+小男孩的身高=小男孩脚底板距离窗口顶部的距离(也就是路中间的点top值),即小男孩的top值 + 小男孩的自身height = 小男孩应该站的位置坐标。
有视频的课大家直接看视频,我直接对着没视频的课代码撸起!
​ 请注意章节,与慕课上的章节一一对应。慕课地址:传送门 走你!

撸代码

贴出js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
var content = document.getElementById('content');
var slider = Swipe(content);
// 获取数据
var getValue = function (className) {
var elements = document.getElementsByClassName(className);
// 走路的路线坐标
return {
height: elements[0].offsetHeight,
top: elements[0].offsetTop
};
};
// 路的Y轴
var pathY = function () {
var data = getValue('a_background_middle');
return data.top + data.height / 2;
}();//加这个括号的意思:立即执行函数
var boy = document.getElementById('boy');
var boyHeight = boy.offsetHeight;

// 修正小男孩的正确位置
// 路的中间位置减去小孩的高度,25是一个修正值
boy.style.top = pathY - boyHeight + 25 + 'px'
</script>

结束语

全部代码就不贴了,只贴出我改的地方。

代码我已上传百度云盘,欢迎大家下载查看。。。
链接:http://pan.baidu.com/s/1nvt9Qsh 密码:pexw
如有疑问请在下方留言。。。