笔记本电脑没有鼠标如何实现鼠标的滑轮效果上下滑动页面？

本本中下方有一个触摸板的，四个角都是鼠标键，先用左侧的左键选中要滑动的对象，然后用另一个手指在触模板上可以上下左右的划动来移动对象，如是单独的翻页滚屏，按pageup键或pagedown键就可以了。

首先打开控制面板。打开开始菜单，在开始菜单中打开控制面板选项。

然后，在控制面板中，找到鼠标这个选项，如图所示，点击左键打开它。

然后，d出一个鼠标属性设置页，在属性页面上方有一系列的标签页，如果你的鼠标有滑轮这个硬件，那么就会有这样一个标签，用鼠标切换到此标签。

在油轮标签下面，首页是一个垂直滚动的选项，即选择一次滚动可以下翻多少页，可以在箭头所指的地方调节数字 ，数字越大，滚动越多。

其次是水平滚动选项，因为我们在 *** 作资源管理器的时候，经常会遇到横向滚动的文件列表，所以，就要在此设置滚动的数量了，同样是点击上下调节大小，不过一般不要太大，否则看不清横向的文件。

设置完成，最后点击确定按钮，退出鼠标属性设置页。这时你再用鼠标浏览网页，向下翻页时就不会那么慢了。

标签的触摸/鼠标滑动事件，添加元素的切换动画，效果如下：

事件监听

鼠标事件和触摸事件监听：

触摸事件，不能HTMLElement.ontouchstart添加事件监听，可以EventListener或者在标签中添加。

触摸事件有以下几个：

touchstart事件：手指触摸时候触发（支持多指触发）

touchmove事件：手指在滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动，当然也不能滥用否则会影响原有页面的上下滚动等。

touchend事件：手指从屏幕上离开的时候触发

touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明。。。不建议使用

事件处理

添加全局字段：

滑动处理，超出滑动阈值后，更新相关状态。

添加切换动画

动画，可以通过state参数触发

 本文完~

首先我们创建一个html文件，写出html文件的一些基础代码

然后我们在网页中新建一个div，并新建一个

无序列表并创建4个然后使用浏览器直接打开html文件，查看效果，可以看到我们创建的标签自带有一定的格式，

接下来我们使用下面的代码去除标签的格式，其中：list-style:none表示去除标签的格式width:160px表示设置标签的宽height:240px表示设置标签的高background:#666666表示设置标签的背景色float:left表示设置标签浮动显示，并且为左浮动margin-right:20px表示设置标签右外边距

刷新浏览器中html文件查看效果，

这里我们开始添加动画：

给

标签添加：

transition:transform 0.1s

transform表示变换的属性，0.1上表示表换所需要的时间另外给标签添加鼠标滑动属性

li:hover{cursor:pointertransform:translate(0,-10px)}

cursor:pointer表示鼠标滑过显示为小手形状

transform:translate(0,-10px)translate表示移动，第一个参数为水平移动值，第二个参数为垂直移动值，

进入浏览器直接查看效果，如下图实现了鼠标滑过块，块上移的动画特效，如下图：

---