开富安论坛

标题: 页面整屏滑动切换(jQuery+HTML5) [打印本页]

作者: admin 时间: 2025-4-1 21:25
标题: 页面整屏滑动切换(jQuery+HTML5)

软件大小：41KB
软件语言：简体中文
软件授权：共享软件
软件类型：编程开发 / 综合控件
软件平台：Win7, WinAll
更新时间：2025-03-05 12:32
星级评分：
软件官网：

                                    软件标签:
                                             整屏切换
                                             HTML5
                                             源码



页面整屏滑动切换（jQuery+HTML5）是专为该需求用户打造的源码，适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。不支持IE8及以下浏览器。欢迎下载。
页面整屏滑动切换源码简介：
页面整屏滑动切换（jQuery+HTML5），可以点击右边的的标志按钮，切换不同的屏幕，也可以通过滚轮或垂直滚动条来切换。

从监听开始，用一个变量记录触摸的起点位置，然后move的时候用move的触发的clientY的值减去起点位置，让页面滑动那个差值的距离，这个距离可能为负为正，然后end的时候判断需要往哪边修正位置。

页面整屏滑动切换使用方法：
end的时候我做的处理是先判断滑动的方向，（这个怎么判断呢？在move的时候用一个变量记录move的位置，然后用最后一个减去start的时候记录的位置，差值正负就是方向了）我预先计算了每一个div离页面最顶部的位置，然后倒序找第一个为负的元素，如果同时是向上滑动且下一个元素冒出头来的距离大于六分之一屏幕，就把下面的拉上来，如果同时是向下滑动且上一个元素冒出尾部的距离大于六分之一就把上面的拉下来。

其中碰到的坑是move的时间通过return false无法阻挡默认事件，只能e.preventDefault（），但是电脑上模拟移动页面可以使用return false














                                                                                 页面整屏滑动切换(jQuery+HTML5)

欢迎光临开富安论坛 (http://www.kaifuan.com/)