明天就六一儿童了（放假了），在这里提前祝大家周末快乐，每逢节假日公司必然会推出h5活动页的需求，这次六一儿童节也不例外，产品这次倒是没提什么互动效果需求，只不过根据UI妹子给的设计图，图片与图片中颜色区分过于明显，所以自己感觉还是做全屏滚动效果比较好看，因此在这里做个总结……

 

 方法一：

效果图展示（动态图用的是LICEcap软件）：

 

全局代码展示：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8"/>
  5.         <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
  6.         <meta name="format-detection" content="telephone=no" />
  7.         <meta content="yes" name="mobile-web-app-capable">
  8.         <meta content="yes" name="apple-mobile-web-app-capable" />
  9.         <meta http-equiv="Cache-Control" content="no-siteapp" />
  10.         <title>移动端h5活动整页滑屏</title>
  11.         <style type="text/css">
  12.             *{padding:0;margin:0}
  13.             body,html{height:100%;background-color:#fff}
  14.            .wrap{width:100%;height:100%;overflow:hidden}
  15.            .wrap2{width:100%;height:1000%;transition:.3s linear}
  16.            .page{width:100%;height:10%;}
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div class="wrap" id="wrap">
  21.             <div class="wrap2" id="wrap2">
  22.                 <img class="page" src="img/six01.png"/>
  23.                 <img class="page" src="img/six02.png"/>
  24.                 <img class="page" src="img/six03.png"/>
  25.                 <img class="page" src="img/six04.png"/>
  26.                 <img class="page" src="img/six05.png"/>
  27.                 <img class="page" src="img/six06.png"/>
  28.                 <img class="page" src="img/six07.png"/>
  29.                 <div class="img-eight page">
  30.                     这一块是input框，为了简化代码，易于理解去掉了
  31.                 </div>
  32.             </div>
  33.         </div>
  34.         <script type="text/javascript">
  35.             //重要！禁止移动端滑动的默认事件（这一块是移动端下拉的时候会触发到刷新事件，滑动图片会上不去）
  36.             document.body.addEventListener('touchmove', function(event) {
  37.                 event = event ? event : window.event;
  38.                 if(event.preventDefault) {
  39.                     event.preventDefault()
  40.                 } else {
  41.                     event.returnValue = false
  42.                 }
  43.             }, false)
  44.             var pages = function(obj) {
  45.                 var box = document.getElementById(obj.wrap);
  46.                 var box2 = document.getElementById(obj.wrap2);
  47.                 var len = obj.len;
  48.                 var n = obj.n;
  49.                 var startY, moveY, cliH;
  50.                 //获取屏幕高度
  51.                 var getH = function() {
  52.                     cliH = document.body.clientHeight
  53.                 };
  54.                 getH();
  55.                 window.addEventListener('resize', getH, false);
  56.                 //touchStart
  57.                 var touchstart = function(event) {
  58.                     if(!event.touches.length) {
  59.                         return;
  60.                     }
  61.                     startY = event.touches[0].pageY;
  62.                     moveY = 0;
  63.                 };
  64.                 //touchMove
  65.                 var touchmove = function(event) {
  66.                     if(!event.touches.length) {
  67.                         return;
  68.                     }
  69.                     moveY = event.touches[0].pageY - startY;
  70.                     box2.style.transform = 'translateY(' + (-n * cliH + moveY) + 'px)'; //根据手指的位置移动页面
  71.                 };
  72.                 //touchEnd
  73.                 var touchend = function(event) {
  74.                     //位移小于+-50的不翻页
  75.                     if(moveY < -50) n++;
  76.                     if(moveY > 50) n--;
  77.                     //最后&最前页控制
  78.                     if(n < 0) n = 0;
  79.                     if(n > len - 1) n = len - 1;
  80.                     //重定位
  81.                     box2.style.transform = 'translateY(' + (-n * 10) + '%)'; //根据百分比位置移动页面
  82.                     console.log(n)
  83.                 };
  84.                 //touch事件绑定
  85.                 box.addEventListener("touchstart", function(event) {
  86.                     touchstart(event)
  87.                 }, false);
  88.                 box.addEventListener("touchmove", function(event) {
  89.                     touchmove(event)
  90.                 }, false);
  91.                 box.addEventListener("touchend", function(event) {
  92.                     touchend(event)
  93.                 }, false);
  94.             };
  95.             pages({
  96.                 wrap: 'wrap', //.wrap的id
  97.                 wrap2: 'wrap2', //.wrap2的id
  98.                 len: 8, //一共有几页，这里就是数字几
  99.                 n: 0 //页面一打开默认在第几页？第一页就是0，第二页就是1
  100.             });
  101.         </script>
  102.     </body>
  103.  
  104. </html>

 

 方法二：

效果图如下：

 

整体代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>移动端滚屏效果</title>
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  7.         <style type="text/css">
  8.             body,html{
  9.                 width: 100%;
  10.                 height: 100%;
  11.                 margin: 0;
  12.                 padding: 0;
  13.             }
  14.             .g-fullPage{
  15.                 width: 100%;
  16.                 height: 100%;
  17.                 overflow: hidden;
  18.             }
  19.             .g-fullPage div{
  20.                 width: 100%;
  21.                 height: 100%;
  22.                 text-align: center;
  23.                 line-height: 100%;
  24.                 transition: 0.5s ease-in;
  25.             }
  26.             .g-fullPage div:nth-child(1){
  27.                 background-color: #D5F1FD;
  28.             }
  29.             .g-fullPage div:nth-child(2){
  30.                 background-color: aquamarine;
  31.             }
  32.             .g-fullPage div:nth-child(3){
  33.                 background-color: mediumseagreen;
  34.             }
  35.         </style>
  36.     </head>
  37.     <body>
  38.         <div class="g-fullPage">
  39.             <div class="f-pageFirst">1</div>
  40.             <div>2</div>
  41.             <div>3</div>
  42.         </div>
  43.     </body>
  44.     <script type="text/javascript">
  45.         /*
  46.              mainClass      滑动父容器类名
  47.              firstClass  第一页的类名
  48.              num                  总页数
  49.         */
  50.         function fullPage(mainClass, firstClass, num) {
  51.             var startX = 0,                //初始横坐标
  52.                     startY = 0,                //初始纵坐标
  53.                     marginTop = 0,        //上下滑动变量
  54.                     touchNum = 0,            //上滑极限，是否可以上滑
  55.                     touchFlag = true, //可滑动标志 true 可滑动，false 不可滑
  56.                     bodyHeight = document.body.offsetHeight,
  57.                     page = document.getElementsByClassName(mainClass)[0],
  58.                     pageFirst = document.getElementsByClassName(firstClass)[0];
  59.                 
  60.             //获取触摸的初识坐标
  61.             page.addEventListener("touchstart",function(e){
  62.                  e.preventDefault();
  63.                 startX = e.targetTouches[0].clientX;
  64.                 startY = e.targetTouches[0].clientY;
  65.             })
  66.             //重置触摸的坐标值
  67.             page.addEventListener("touchend",function(e){
  68.                  e.preventDefault();
  69.                 startX = 0;
  70.                 startY = 0;
  71.                 touchFlag = true;
  72.             })
  73.             
  74.             //监听并实现 上、下 滑动效果
  75.             page.addEventListener("touchmove",function(e){
  76.                  e.preventDefault();
  77.                 var newX = e.targetTouches[0].clientX,
  78.                         newY = e.targetTouches[0].clientY;
  79.                 if (newY - startY > 50) {
  80.                     if (touchFlag == true && touchNum > 0) {
  81.                         console.log("下滑");
  82.                         touchFlag = false;
  83.                         marginTop += 1;
  84.                         touchNum -= 1;
  85.                         pageFirst.style.marginTop = marginTop * bodyHeight+"px";
  86.                     }
  87.                 } else if (newY - startY < -50) {
  88.                     if (touchFlag == true && marginTop > -num+1) {
  89.                         console.log("上滑");
  90.                         touchFlag = false;
  91.                         marginTop -= 1;
  92.                         touchNum += 1;
  93.                         pageFirst.style.marginTop = marginTop * bodyHeight+"px";
  94.                     }
  95.                 }
  96.             })
  97.         }
  98.         
  99.         fullPage("g-fullPage", "f-pageFirst",3);
  100.     </script>
  101. </html>

 

总结：希望上面两种方法对大家有所帮助，最后，祝大家六一快乐啦！

参考博文：

https://blog.csdn.net/qq_38881495/article/details/83688999

https://www.cnblogs.com/pengfei-nie/p/9068568.html

 

版权声明：本文为hejun26原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/hejun26/p/10953882.html