H5全屏滑动

legendaryedu 发布于2019-08-02 18:17 / 2963人阅读

摘要：比如最常见的活动营销简历页面是一个全屏滚动页面。这个是公司定的规则，并没有写入规范，但是成为了业内标准。就是包含屏幕块的标签操作值实现动画。在用户移动手机的过程中连续触发。用户的手指离开屏幕的瞬间触发。

移动web时代，学会做一些简单H5页面会很受用。比如最常见的活动营销简历H5页面是一个全屏滚动页面(fullpage)。以下就是一个简单的例子。 DEMO：Demo地址

空的页面

新建一个空的html5页面,在head标签里面加入两个meta标签

第一个标签是引导浏览器使用最新内核。
第二个标签是控制设备的视口宽度为屏幕宽度，然后静止缩放，模拟原生app的感觉。

这个是apple公司定的规则，并没有写入w3c规范，但是成为了业内标准。浏览器厂商都约定俗成了。

就是这样的一个空的页面了。

css html


    
        
            这是屌屌的第一屏页面222
        
        
            这是霸气的第二屏页面
        
        
            这是呵呵的第三个屏页面

body{
    padding: 0;
    margin: 0;
    overflow: hidden
}
.section{
    width: 100vw;
    height: 100vh;
}
h1{
    margin: 0px;
}
.main-wrap{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.main {
    position: absolute;
    top: 0px;
    left: 0px;
    transition: 500ms cubic-bezier(0.86, 0, 0.07, 1);
}

先解释两个css3属性，width: 100vw是指宽度和设备宽一致同理100vh,transition是css3的一个属性过度。cubic-bezier(0.86, 0, 0.07, 1);是一个自定义贝泽尔曲线。这是一个磁性滚动的过度,嗯,参数我是抄锤子科技的。

首先清下body和h1的内置样式。main-wrap是最外面的一个DOM节点相当于窗口的作用,是固定不动的，宽高和设备一致。
main就是包含屏幕块的标签,操作top值,实现动画。写过Banner动画的同学肯定不陌生。类似的原理。然后每个section就是一个屏的内容。

手势库

移动端和PC端在事件中有很多不同,比如没有hover事件了，click比tap慢几百毫秒了，等等，反正坑很多，同志一起好好学吧～。移动端一共有4种触摸事件:

touchstart,在用户的手指触摸屏幕的瞬间触发。

touchmove,在用户移动手机的过程中连续触发。

touchend,用户的手指离开屏幕的瞬间触发。ios离开webview边界不会触发。

touchcancel,很特殊，浏览器差异,(不需理会)。

任何手势就是计算这几个事件内的值加减乘除来判断各种手势。
最直接的就是引入一个开源的手势库。Hammer就是我比较推荐的一个手势库。
我用的是最新版2.0.4
Hammer介绍页

JS部分

var sHeight = document.querySelector(".a").clientHeight;
//获取一屏的高度，判断该移动多少
var sLength = document.querySelectorAll(".section").length;
//判断有几屏页面
var sIndex = 0;//标记当前第几页
var sScroll = false;//滚动时就不再触发事件，防止误点
var main = document.querySelector(".main"); //需要移动的DOM
window.onmousewheel = function(e){
    //PC端的滚轮事件，嗯不兼容火狐
    if(!sScroll){
        if(e.wheelDelta>0){
            //上一页
            if(sIndex == 0){return; }
            sIndex--;
            scrollTo(sIndex);
        }else{
            //下一页
            if(sIndex == sLength-1){return;}
            sIndex++;
            scrollTo(sIndex);
        }
    }
}

function scrollTo(i){
    //操作动画的函数
    sScroll = true;
    main.style.top = -i*sHeight + "px";
    setTimeout(function(){sScroll = false}, 700);
}

var hamm = new Hammer(document.querySelector(".main-wrap"));
hamm.get("swipe").set({ direction: Hammer.DIRECTION_ALL});
//hammer默认关闭上下swipe 设置开启上下滑屏
hamm.on("swipedown", function(){
        if(!sScroll){
                //上一页
                if(sIndex == 0){return; }
                sIndex--;
                scrollTo(sIndex);
        }

});
hamm.on("swipeup", function(){
        if(!sScroll){
                //下一页
                if(sIndex == sLength-1){return;}
                sIndex++;
                scrollTo(sIndex);
        }        

});

最后放张完整的js部分的图:

混合云服务器托管 h5 全屏视频js 全屏 vps全屏 webrtc全屏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55283.html

H5打造属于自己的视频播放器（JS篇2）

摘要：回顾算了不回顾了直接搞起，打开中写的播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播放按钮将会隐藏，播放视频，这个不难，在中我们就已经实现。回顾算了不回顾了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打开JS1中写的bvd.js 播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播...

sPeng 2019-08-21 14:17 评论0 收藏0
H5打造属于自己的视频播放器（JS篇2）

摘要：回顾算了不回顾了直接搞起，打开中写的播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播放按钮将会隐藏，播放视频，这个不难，在中我们就已经实现。回顾算了不回顾了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打开JS1中写的bvd.js 播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播...

hss01248 2019-08-05 10:02 评论0 收藏0
H5打造属于自己的视频播放器（JS篇2）

摘要：回顾算了不回顾了直接搞起，打开中写的播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播放按钮将会隐藏，播放视频，这个不难，在中我们就已经实现。回顾算了不回顾了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打开JS1中写的bvd.js 播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播...

bang590 2019-08-01 15:37 评论0 收藏0
基于Uni-APP多端「h5+小程序+App」高仿抖音小视频|直播|聊天实例

摘要：基于跨端开发短视频直播聊天实例。全新研发的一款多端仿制抖音短视频直播聊天项目，基于等技术开发而成。播放进度变化时触发小视频支持播放暂停，上下滑动切换效果。 uni-...

yagami 2021-09-22 10:02 评论0 收藏0
UI仿写

摘要：像微信一样的图片选择器像微信一样的图片选择器像微信一样录制视频和音频重构史上最牛逼的音乐播放器仿网易云音乐已开源无论是下载模块，还是换肤模块，还是炫丽的界面通讯录顶部固定的索引效果通讯录和城市列表展示时通用的滑动顶部固定的索引列表效果 Android 仿京东、天猫 app 的商品详情页的布局架构, 以及功能实现仿京东、天猫 app 的商品详情页自定义 viewgroup+viewd...

frontoldman 2019-06-25 11:46 评论0 收藏0