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

JavaScript016

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

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

操作方法

01

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

02

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

03

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

04

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

05

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

06

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

楼主的这个代码我看不太懂

是经过压缩的

楼主看下这个代码,经过修改应该可以的

http://www.lanrentuku.com/js/biaoqian-598.html

让整个web页面滑动切换方法如下:

解决办法其实很简单,采用AJAX刷新、CSS切换。这里还需要注意的是,只有在WebKit浏览器上能看到效果。(用PhoneGap做了一个测试应用,可以在Android和IOS系统上运行,所以只需要WebKit的兼容性。)

1、首先,看看对body标签的css样式,让它有动画效果:

2、接下来,给超链接添加点击事件,让它产生切换效果。

3、下一步是使用AJAX获取到链接页面

4、要达到切换效果,还需要以下步骤:

a. 滑动当前页面到屏幕左侧;

b. 瞬间移动当前页面到屏幕右侧;

c. 替换body里面的内容;

d. 从屏幕右侧滑入当前页面对。

5、必须要遵循上面的步骤,不然不能达到预期的效果。

现在说一下详细步骤:

a.移动body到屏幕的左侧

b.写个移动监听事件

c.切换过程中,用户可能会点击后退按钮,还需对此进行处理:

总结:基本的思路就这些,当然在实际操作过程中还有一些细节需要注意,这里就不详细说了,都在代码里能体现出来