结合css与javascript来实现手机移动端的屏幕滑动效果

今天心情不错  那就写写博客吧   今天我在这里与大家分享一下手机移动端的屏幕切换的效果希望能帮助一些刚接触js的同学

 

好啦 不多说，上代码

我们先上设置一个父容器div  然后里面包含了子容器 然后给它们加上 class

我这里定义好了它们的布局 接下来我们来设置它的样式

好 这里是先给父容器定义了样式  然后在给子容器定义样式

到了这里呢 基本的布局已经写好了 然后根据你的个人喜好来给每个手机屏幕切换的背景颜色 还是在style里去添加样式

背景颜色也写完了 这是我随便弄了几个颜色 接下来我们来看看样式写完的效果 当然我这里是用谷歌浏览器打开的哦

运行打开后点击上面的提示  如下有这样的效果 上面我选的手机类型是iPhone6s 你可以根据的你选择来选择你想要的手机型号  这里默认的是第一个页面就是上面我们定义的一个第一个<div class=page></div> 背景颜色为红色 当然我们在参加工作之后可以根据项目要求来写上相关的内容与样式。

好了 我们固定页面样式写完了 接下来我们就用我们的javascript来实现它的切换效果 我们用script标签插入

我们这里先获得所有的container 然后声明两个变量 start ，ent

然后给它添加两个事件 touchstart 和touchmove 当手指放上去点击时就触发 和连续触发

当然我们有点击滑动 也要有手指离开的时候 好 我们看下面

说了这么多到底有没我们想要的效果呢  看下面

我们刚才说了第一个默认的屏幕是红色是吧 那下面就是：

第二个屏幕 

第三个

第四个

第五个

 

我们这里设置的是X轴水平方向上的切换  如果我们想让它向下切换呢  怎么弄呢   也很简单 就直接在上面的父容器上面把h改写成v 因为我们在样式里设置了水平方向是h 垂直反向是v 所以我们改一下就可以  记得哦 想屏幕切换 用电脑鼠标点击滑动在松开就可以实现效果了。  说了这么多 希望能对同学们有帮助