鼠标滑动一次切换一个页面HTML+CSS+JS

JavaScript017

鼠标滑动一次切换一个页面HTML+CSS+JS,第1张

一般我们默认的我们鼠标滑轮滑动一次就是向下或者向上滑动一行,但这样有的时候不能满足我们的需求,看一篇文章如果看完一屏幕再向下滑,通过滑轮的话就需要滑很久,如果我们设置一下鼠标滑轮每次滑动向下滑动几行或者是一页,那就方便多了,接下来我来演示一下如何操作设置。

操作方法

01

首先在桌面任意位置,用鼠标右击,在出来的菜单中选择个性化。接下来就会蹦出来一个电脑个性化设置的一个对话框。

02

在个性化设置对话框左侧可以找到一个更改鼠标指针的选项,我们点击选择它,就可以进入到鼠标属性的相关设置页面。

03

在鼠标属性设置对话框,上面就有一个滑轮选项,我们点击选择它,就可以进入到滑轮的设置相关页面。

04

我们可以看到滑轮的设置有垂直滚动和水平滚动,一般我们使用电脑的浏览页面的话都是说的垂直滚动。

05

在垂直滚动下就可以看到鼠标滑轮滚动一下可以向下移动多少进行具体的设置,可以是几行,在这里可以使用后面的那个小箭头来鼠标点击增加或者是减少,也可以是直接在编辑框内直接输入行数。

06

或者是设置为鼠标滑轮滚动一次就是一个屏幕,这样在看文章的时候会更加方便,不用总是在滑动屏幕,而且对眼睛也比较好。可以看到鼠标垂直滑动第二个选项就是一次滑动一个屏幕的选项,我们点击选择它,最后确定就可以了。

题主这个问题有这么两个理解方向:

左划可以进行页面跳转

左划可以在页面内进行样式更改从而实现类似于app开场的切换页面。

第一个方向:

你可以使用原生JS实现左划手势的判别,在ontouchstart和ontouchend事件中存储一个deltaX判断一个阀值,然后执行一个跳转方法。

不通过原生JS实现你也可以通过第三方库去实现,这里推荐两个:

hammerJS

Zepto + touch.js

第一个hammerJS是一个开源项目,我个人比较喜欢的触摸事件库,里面有提供panleft方法,同事还有和它平行的pandown,panright,panup这些是“左划右划上划下划”事件的捕捉,捕捉到事件之后就会运行回执方法,例如 reload() 或者 loadData()方法。

第二个是业内普遍使用的移动端库zeptoJS,touch.js是它的touch插件

第二个方向:

这个和第一个的实现原理是一样的,监听到事件,然后执行相应的方法。

这样做的难点在哪里呢?

第一个需要指明的就是自适应。基本上这种使用方法的页面都是整屏滚动的,实现方式也是较为一致:改变DOM的位置做动画去切换

示意图:

在操作的的事件调用去改变整个大容器的margin-left就可以实现这个效果了,难点就在于每一个小容器内部的自适应。当然,这些小容器的内部你可以放置一个iframe框去放其他的网页,这些就看你发挥了。

对于插件或者处理方法有疑问的请追问。