动态向下箭头，实现整屏翻页

一、实现效果

可通过单击图标或向下滚动鼠标进行整屏滚动

二、图标的实现过程
1.最开始我使用的方法是使用图片，但想要找到刚好适合的图片比较难
2.之后我使用的是bootstrap里的图标，不过效果也不尽人意

<span style="color: rgb(192, 192, 192);font-size: 80px;" class="glyphicon glyphicon-chevron-down"></span>

3.没办法，只好学习新技术了——html5 canvas。

 <div id="down"><canvas id="downCanvas" width="50" height="50">你的浏览器不支持canvas，请下载更新版本的浏览器</canvas></div>function drawDown() {var c = document.getElementById("downCanvas"),cxt = c.getContext("2d");cxt.beginPath();cxt.moveTo(5, 20);cxt.lineTo(25, 45);cxt.lineTo(45, 20);cxt.lineWidth = 5;cxt.strokeStyle = "gray";cxt.lineCap = 'round';cxt.lineJoin = "round";cxt.stroke();cxt.moveTo(5, 5);cxt.lineTo(25, 30);cxt.lineTo(45, 5);cxt.lineWidth = 5;cxt.strokeStyle = "gray";cxt.lineCap = 'round';cxt.lineJoin = "round";cxt.stroke();}drawDown()

三、动态效果的实现

@-moz-keyframes myMove {0% {padding-top:30px;}100% {padding-top:50px;}
}
@-webkit-keyframes myMove {0% {padding-top:30px;}100% {padding-top:50px;}
}
@-o-keyframes myMove {0% {padding-top:30px;}100% {padding-top:50px;}
}
@keyframes myMove {0% {padding-top:30px;}100% {padding-top:50px;}
}
#down {text-align: center;height: 150px;-moz-animation: myMove 1s linear infinite alternate; -webkit-animation: myMove 1s linear infinite alternate;-o-animation: myMove 1s linear infinite alternate;animation: myMove 1s linear infinite alternate;
}

注意：应该把动画放在<span>上，而不是<div>上，以免影响下面的样式

三、整屏翻页效果的实现

我只在第一屏设置此效果，各位对号入座~~

 滚动鼠标：var absHeight = $(window).height();    var scrollTop = 0;$(window).scroll(function () {var st = $(window).scrollTop();if (st > 0) {$("#backToTop").css("display", "block");} else {$("#backToTop").css("display", "none");}//下滚且在第一屏if (st > scrollTop && scrollTop === 0) {$("html,body").animate({scrollTop : scrollTop + absHeight}, 1000);            }//上滚且在第二屏if (st < scrollTop && scrollTop === absHeight) {$("html,body").animate({scrollTop : scrollTop - absHeight}, 1000);             }//关键代码：判断鼠标中键的滚动方向scrollTop = st;});点击图标：$("#backToTop").click(function () {$("html,body").animate({scrollTop : absHeight}, 1000); });

注意：

1.$(document).height()：整个网页的高度$(window).height()：浏览器可视窗口的高度$(window).scrollTop()：随着滚动条下拉被隐藏的部分的高度当滚动条拉到最底时，有：
$(document).height()=$(window).height()+$(window).scrollTop()；2.$("html,body"):$("html")兼容IE和Firefox,$("body")兼容chrome和opera（自己试出来的~~）

简单的实现了这个功能，不过还有很多small bug, 例如滚动时的抖动问题，哈哈！

动态向下箭头，实现整屏翻页相关推荐

利用fullpage插件，快速开发整屏翻页的页面
我们经常看过一些整屏翻页的网站,看上去很高大上对于一些同学来说如果要原生的去开发可能还是有很大难度的.今天我给大家介绍Fullpage插件,也能达到这一个效果.下面我给同学们看下小米网站的这个页面:h ...
AngularJS封装指令实现下拉刷新自动翻页加载数据
目前PC的网页越来越流行瀑布流的下拉刷新自动加载数据,本文来讲解一下. 滚动翻页基本原理就是判断scrollTop和offsetHeight之和大于等于 scrollHeight. 一.不适用Jqu ...
Ubuntu下拼音输入法的翻页键设置
1.打开终端: 2.输入 sudo -l,然后输入密码; 3.在命令提示符下运行/usr/lib/ibus-sunpinyin/ibus-setup-sunpinyin(直接回车运行); 4.在Key ...
android 动态向下箭头,向上/向下箭头添加到android numberpicker
我做了一个数字选择对话框.它看起来像左边的图像,但没有上/下箭头: 我该如何添加它们? 这是我的代码: public class NumberPickerFragment extends Dialog ...
太大如何翻页固定表头_外行学 Python 爬虫第六篇动态翻页
前面几篇文章,初步完成了从网络请求.数据解析.数据存储的整个过程,完成了一个爬虫所需的全部功能.但是通过对数据库中数据的分析会发现数据库中的元件数量比网站上的元件数量少了很多.前面的实现过程通过解析网 ...
使用js实现微信小页面翻页的原理介绍
为什么80%的码农都做不了架构师?>>> 文中要介绍的内容是四个手机页面,手指向上或者向下滑动可以实现翻页的功能.由于代码比较简短,可能存在许多bug,思路可供大家参考. 1. ...
linux常用翻页,20150823-Linux常用命令
概述在Linux中,对Linux的管理和操作,全部以Linux命令方式实现,在这里我们将介绍下Linux下的一些常用命令. 第一部分:Linux目录管理类命令目录管理类命令: mkdir, rmd ...
linux 只有命令指示,Linux命令行翻页?
公告: 为响应国家净网行动,部分内容已经删除,感谢读者理解. 话题:Linux命令行翻页? 问题详情:有没有其他按键翻页? 我只知道用管道的方法more来分页显示,回答:Shift+PageUPPag ...
qtablewidget翻页禁止_PyQt—QTableWidget实现翻页功能
主要使用QTableWidget中的三个函数实现: verticalScrollBar().setSliderPosition() 设置当前滑动条的位置 verticalScrollBar().max ...

动态向下箭头，实现整屏翻页

动态向下箭头，实现整屏翻页相关推荐

最新文章

热门文章