|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 不二如是 于 2017-12-24 11:22 编辑
在之前的系列中,我们学习了最流行的JavaScript框架jQuery。
论坛上有一个小尴尬:
言归正传:
素材包:
素材.zip
(23.38 KB, 下载次数: 6, 售价: 1 鱼币)
文档结构:
基本知识:
- $(window).height(); //用于获取浏览器显示区域(视口)的高度
- $(window).width(); //用于获取浏览器显示区域的宽度
- $(document.body).height(); //获取页面文档的高度
- $(document.body).width(); //获取页面文档的宽度
- $(document).scrollTop(); //获取垂直滚动条到顶部的垂直距离
- $(document).scrollLeft(); //获取水平滚动条到左边的水平距离
- $('元素id或class').offset(); //方法返回或设置匹配元素相对于文档的偏移(位置)。该方法返回的对象包含两个整型属性:top 和 left
复制代码
回到顶部
此特效是网页开发中出现频率非常高的一个功能,虽然有很多能实现该功能的插件。
只需要简单的引入效果就实现了,但实现原理一知半解,这次我来一点一点拆解开来。
要实现的效果:
1.通过jQuery判断滚动条向下滚动的长度大于多少时显示【回到顶部】元素。
2.点击实现“回到顶部”效果。
HTML基本结构:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>鱼C-置顶&置底</title>
- <!--引入css样式-->
- <link rel="stylesheet" href="css/main.css">
- <!--引入jq文件-->
- <script src="js/jquery.min.js"></script>
- </head>
- <body>
- <!--模拟长页面结构-->
- <div style="width: 100%;height: 3333px;">
- <!--p标签,放在页面顶部,防止代码不起作用(浏览器版本),仍可通过锚点操作实现-->
- <p id="pageTop"></p>
- <!--定义按钮-->
- <div id="topButtonSize">
- <!--通过a标签绑定,以防万一,先注释掉-->
- <!--<a href="#pageTop" class="goPageTop"></a>-->
- <a class="goPageTop"></a>
- </div>
- </div>
- </body>
- </html>
复制代码
添加置顶区域-css样式:
- #topButtonSize{
- position: fixed;
- bottom: 66px;
- right: 11px;
- width: 50px;
- height: 66px;
- z-index: 9999;
- background-color: #faa;
- }
复制代码
现在可以添加按钮样式了,别忘了把背景色去掉。
添加按钮样式:
- .goPageTop{
- background: url(../img/up.png) no-repeat 0 0;
- width: auto;
- height: 50px;
- background-size:32px auto ;
- display: block;
- }
复制代码
调用图片,具体样式不解释了,毕竟是jq系列。
现在添加动作,完成单击图片,置顶:
- <script>
- // 回到顶部
- $(function () {
- $(window).scroll(function () {
- if($(window).scrollTop() > 99)
- {
- // >99,渐变显示按钮区域
- $("#topButtonSize").fadeIn(100);
- }
- else{
- $("#topButtonSize").fadeOut(100);
- }
- })
- })
- </script>
复制代码
B格有了,现在添加最重要的置顶:
- $(function () {
- // 单击按钮,通过动画设置页面高度在1s内变为0
- $(".goPageTop").click(function () {
- $('body,html').animate({
- scrollTop:0
- },1000);
- return false;
- })
- })
复制代码
判断是否到达底部或某元素
教程一开始的几个关于高度的jQuery知识点,总结出户:
- 浏览器显示区域的高度+垂直滚动条距离顶部距离<=网页的高度
复制代码
理解了这个公式,效果实现起来就简单很多了。
添加js:
- $(window).scroll(function () {
- //网页文档高度
- var bodyHeight = $(document.body).height();
- // 滚动条距离网页顶部的高度
- var scrollHeight = $(document).scrollTop();
- // 页面可视化区域高度
- var divHeight = $(window).height();
- // 向上取整来判断,没啥影响,分享下用法而已
- if(Math.ceil(divHeight + scrollHeight) >= bodyHeight)
- {
- alert("大佬触底了!");
- }
- })
复制代码
利用上面的基础代码还可以扩展出一个效果更好的特效:
滚动滚动条,到达底部的时候通过Ajax实现加载更多的效果,该效果其实是分页的另一种效果。
欢迎自己脑洞实现~
最终源码:
jQ回到顶部&底部.zip
(42.69 KB, 下载次数: 7, 售价: 10 鱼币)
如果喜欢,别忘了评分 :
这位鱼油,如果喜欢本系列Js帖子,请订阅 专辑☞( 传送门)( 不喜欢更要订阅 ) |
|