开富安论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 157|回复: 0
打印 上一主题 下一主题

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

[复制链接]

22万

主题

22万

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
221754
跳转到指定楼层
楼主
发表于 2025-4-1 21:25:29 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

                            
  • 软件大小: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)


                           
回复

使用道具 举报

Archiver|手机版|小黑屋|开富安论坛

GMT+8, 2025-11-19 15:47 , Processed in 0.071224 second(s), 25 queries .

Powered by Discuz! X3

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表