基本思路:
1)检测手指滑动方向:获取手指抬起时的位置,减去手指按下时的位置,得正即为向下滑动了
2)手指抬起后,向对应反向操作改变当前页的位置
具体代码如下:
- <div id="wrap">
- <div id="page01" class="pages">第一屏</div>
- <div id="page02" class="pages">第二屏</div>
- <div id="page03" class="pages">第三屏</div>
- <div id="page04" class="pages">第四屏</div>
- </div>
- <div id="dots">
- <span class="now"></span><span class=""></span><span class=""></span><span class=""></span>
- </div>
- *{
- margin:0;
- padding:0;
- }
- body{
- overflow: hidden;
- }
- #wrap > div{
- width: 10rem;
- position: absolute;
- left: 0;
- top: 0;
- background: #fff;
- transition: all 0.3s ease;
- }
- #dots{
- position: fixed;
- right: 5px;
- top: 40%;
- z-index: 9;
- }
- #dots span{
- display: block;
- height: 0.2rem;
- width: 0.2rem;
- border: 1px solid #000;
- border-radius: 50%;
- margin-bottom: 3px;
- }
- #dots .now{
- background: #555;
- }
js分为两块
第一,设置html标签的font-size,以便设置rem的基数 (放在页面头部)
- document.getElementsByTagName("html")[0].style.fontSize = window.innerWidth / 10 + "px";
第二,具体的滑动操作代码
- window.onload = function() {
- var oDiv = document.getElementById("wrap");
- var aPages = oDiv.getElementsByClassName("pages");
- var aDots = document.getElementById("dots").getElementsByTagName("span");
- var winH = window.innerHeight;
- var tTime = 1;
- //设置每页的高度和zindex值
- for (var i = 0; i < aPages.length; i++) {
- aPages[i].style.height = winH + "px";
- aPages[i].style.zIndex = 1;
- }
- aPages[0].style.zIndex = 3;
- aPages[1].style.zIndex = 2;
- oDiv.style.height = winH + "px";
- //手指拖动事件(去除默认动作)
- document.addEventListener("touchmove",
- function(e) {
- e.preventDefault();
- });
- var YStart = 0;
- var iNow = 0;
- //手指按下
- oDiv.addEventListener("touchstart",
- function(e) {
- YStart = e.changedTouches[0].clientY;
- });
- //手指移动
- oDiv.addEventListener("touchmove",
- function(e) {
- disY = e.changedTouches[0].clientY - YStart; //向下滑正,向上滑负
- });
- //手指离开
- oDiv.addEventListener("touchend",
- function(e) {
- disY = e.changedTouches[0].clientY - YStart; //向下滑正,向上滑负
- if (Math.abs(disY) > winH / 20) { //只有当滑动距离大于了一定值得时候,才执行切换
- if (disY < 0) {
- iNow++;
- if (iNow >= aDots.length) {
- iNow = 0;
- }
- aPages[0].style.transform = "translateY(" + -winH + "px)";
- doSlide();
- } else {
- iNow--;
- if (iNow < 0) {
- iNow = aDots.length - 1;
- }
- aPages[0].style.transform = "translateY(" + winH + "px)";
- doSlide("up");
- }
- }
- });
- function doSlide(upflag) {
- for (var i = 0; i < aDots.length; i++) {
- aDots[i].className = "";
- }
- aDots[iNow].className = "now";
- if (upflag) {
- //向上滑
- aPages[3].style.zIndex = 2;
- aPages[1].style.zIndex = 1;
- oDiv.insertBefore(aPages[3], aPages[1]);
- setTimeout(function() {
- aPages[1].style.transform = "translateY(0px)";
- aPages[1].style.zIndex = 2;
- aPages[0].style.zIndex = 3;
- },
- 300)
- } else {
- setTimeout(function() {
- aPages[0].style.transform = "translateY(0px)";
- aPages[0].style.zIndex = 1;
- aPages[1].style.zIndex = 3;
- aPages[2].style.zIndex = 2;
- oDiv.appendChild(aPages[0]);
- },
- 300)
- }
- }
- }
好了,在给大家分享一段简单的代码,JS实现移动端整页滑屏示,具体代码如下所示:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"
- />
- <meta name="format-detection" content="telephone=no" />
- <meta content="yes" name="mobile-web-app-capable">
- <meta content="yes" name="apple-mobile-web-app-capable" />
- <meta http-equiv="Cache-Control" content="no-siteapp" />
- <title>
- 移动端整页滑屏示例
- </title>
- <style type="text/css">
- * { padding: 0; margin: 0; font-family: Verdana; } body, html { height:
- 100%; background-color: #000000; } .wrap { width: 100%; height: 100%; overflow:
- hidden; } .wrap2 { width: 100%; height: 1000%; transition: 0.3s linear
- } .page { width: 100%; height: 10% } .page { background-color: #fdfdfd;
- font-size: 100px; line-height: 400px; text-align: center; font-weight:
- bold; }
- </style>
- </head>
- <body>
- <div class="wrap" id="wrap">
- <div class="wrap2" id="wrap2">
- <div class="page">
- 1
- </div>
- <div class="page" style="background-color:#dddddd;">
- 2
- </div>
- <div class="page">
- 3
- </div>
- <div class="page" style="background-color:#dddddd;">
- 4
- </div>
- <div class="page">
- 5
- </div>
- <div class="page" style="background-color:#dddddd;">
- 6
- </div>
- </div>
- </div>
- <script type="text/javascript">
- //重要!禁止移动端滑动的默认事件
- document.body.addEventListener('touchmove',
- function(event) {
- event = event ? event: window.event;
- if (event.preventDefault) {
- event.preventDefault()
- } else {
- event.returnValue = false
- }
- },
- false) var pages = function(obj) {
- var box = document.getElementById(obj.wrap);
- var box2 = document.getElementById(obj.wrap2);
- var len = obj.len;
- var n = obj.n;
- var startY, moveY, cliH;
- //获取屏幕高度
- var getH = function() {
- cliH = document.body.clientHeight
- };
- getH();
- window.addEventListener('resize', getH, false);
- //touchStart
- var touchstart = function(event) {
- if (!event.touches.length) {
- return;
- }
- startY = event.touches[0].pageY;
- moveY = 0;
- };
- //touchMove
- var touchmove = function(event) {
- if (!event.touches.length) {
- return;
- }
- moveY = event.touches[0].pageY - startY;
- box2.style.transform = 'translateY(' + ( - n * cliH + moveY) + 'px)'; //根据手指的位置移动页面
- };
- //touchEnd
- var touchend = function(event) {
- //位移小于+-50的不翻页
- if (moveY < -50) n++;
- if (moveY > 50) n--;
- //最后&最前页控制
- if (n < 0) n = 0;
- if (n > len - 1) n = len - 1;
- //重定位
- box2.style.transform = 'translateY(' + ( - n * 10) + '%)'; //根据百分比位置移动页面
- console.log(n)
- };
- //touch事件绑定
- box.addEventListener("touchstart",
- function(event) {
- touchstart(event)
- },
- false);
- box.addEventListener("touchmove",
- function(event) {
- touchmove(event)
- },
- false);
- box.addEventListener("touchend",
- function(event) {
- touchend(event)
- },
- false);
- };
- pages({
- wrap: 'wrap',
- //.wrap的id
- wrap2: 'wrap2',
- //.wrap2的id
- len: 6,
- //一共有几页
- n: 0 //页面一打开默认在第几页?第一页就是0,第二页就是1
- });
- </script>
- </body>
- </html>
总结
以上所述是小编给大家介绍的JS实现移动端整屏滑动的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/127952.htm