鼠标滑动一次切换一个页面HTML+CSS+JS
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标滑动一次切换一个页面HTML+CSS+JS相关的知识，希望对你有一定的参考价值。
如题，我想做一个类似于 微信T管家 官网的效果 求思路 求方法
一般我们默认的我们鼠标滑轮滑动一次就是向下或者向上滑动一行，但这样有的时候不能满足我们的需求，看一篇文章如果看完一屏幕再向下滑，通过滑轮的话就需要滑很久，如果我们设置一下鼠标滑轮每次滑动向下滑动几行或者是一页，那就方便多了，接下来我来演示一下如何操作设置。
操作方法
01
首先在桌面任意位置，用鼠标右击，在出来的菜单中选择个性化。接下来就会蹦出来一个电脑个性化设置的一个对话框。
02
在个性化设置对话框左侧可以找到一个更改鼠标指针的选项，我们点击选择它，就可以进入到鼠标属性的相关设置页面。
03
在鼠标属性设置对话框，上面就有一个滑轮选项，我们点击选择它，就可以进入到滑轮的设置相关页面。

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

05
在垂直滚动下就可以看到鼠标滑轮滚动一下可以向下移动多少进行具体的设置，可以是几行，在这里可以使用后面的那个小箭头来鼠标点击增加或者是减少，也可以是直接在编辑框内直接输入行数。
06
或者是设置为鼠标滑轮滚动一次就是一个屏幕，这样在看文章的时候会更加方便，不用总是在滑动屏幕，而且对眼睛也比较好。可以看到鼠标垂直滑动第二个选项就是一次滑动一个屏幕的选项，我们点击选择它，最后确定就可以了。 参考技术A 个人觉得大改思路是这样
把一个页面竖向分成N个部分，每个部分的高度和宽度刚好是浏览器的高宽
body的overflow设为hidden
用js监听滚轮的滚动事件，只需要获取方向（是向上滚还是向下滚），同时阻止滚动本身的默认动作冒泡（意思就是滚动滚轮时，不让页面卷动）
获取到方向后，把body的scrolltop相加或相减浏览器高度即可
滚动过程中需暂时屏蔽监听，避免屏幕在滚动过程中又开始执行新的滚动动作造成动画混乱 参考技术B 第一步，先写整页框架，例如左右分栏，上下分栏，头尾等的html结构。然后写对应的样式。
第二步，拆分模块，一个一个模块写html，然后写css，并且套到对应的整体结构中。
第三步，细节调整，整体联调样式。
js呢，其实也可以按照模块写。
这样做的一个好处是，你一个人的工作完全可以无缝拆成多个人的工作。所以当主导一个很重的页面的改版的时候，这种方式让多人协作受益良多。
一个页面可以重复调用的TAB选项卡切换js代码 鼠标悬浮
/*下面是景点页面的变动代码*/
.tabbox {
height: 176px;
padding-bottom: 10px;
}
.tabmenu {
height:25px;
background:url(../imges/scenery_04.jpg) right no-repeat;
}
.tabmenu ul {margin:0;padding:0;list-style-type: none;
border-bottom:solid 1px #816e59;
height:25px;}
.tabmenu li {
overflow:hidden;
float:left;
text-align:center;
width:89px;
height:23px;
line-height:23px;
border-bottom:solid 1px #816e59;
padding-top:2px;
}
.tabmenu ul .cli {
overflow:hidden;
border-bottom:solid 1px #FFF;
border-left:solid 1px #816e59;
border-right:solid 1px #816e59;
border-top:solid 1px #816e59;
font-weight:bold;
cursor:pointer;
width:89px;
height:22px;
line-height:23px;
padding-top:2px;
}
#tabcontent,#tabcontent2,#tabcontent3 {
padding: 5px 10px 18px;
}
#tabcontent ul,#tabcontent2 ul ,#tabcontent3 ul {margin:0;padding:5px;list-style-type: none;}
#tabcontent .hidden,#tabcontent2 .hidden,#tabcontent3 .hidden {display:none;}
.tabbox #tabcontent p,.tabbox #tabcontent2 p,.tabbox #tabcontent3 p{
line-height:20px;
color:#816e59;
text-indent:2em;
}
.tabbox #tabcontent p a,.tabbox #tabcontent2 p a,.tabbox #tabcontent3 p a{
color:#816e59;}
.tabbox #tabcontent p a:hover,.tabbox #tabcontent2 p a:hover,.tabbox #tabcontent3 p a:hover{
text-decoration:none;}<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="utf-8"> <title>TAB切换</title> <link rel="stylesheet" type="text/css" href="12.css" > <script src="12.js"></script> </head> <body> <div class="tabbox"> <div class="tabmenu"> <ul> <li onmouseover="tabChange(this,‘tabcontent‘)" >婺源东线景点</li> <li onmouseover="tabChange(this,‘tabcontent‘)" class="cli">李坑</li> <li onmouseover="tabChange(this,‘tabcontent‘)">江湾</li> <li onmouseover="tabChange(this,‘tabcontent‘)">汪口</li> <li onmouseover="tabChange(this,‘tabcontent‘)">江岭</li> <li onmouseover="tabChange(this,‘tabcontent‘)">晓起</li> <li onmouseover="tabChange(this,‘tabcontent‘)">庆源</li> </ul> </div> <div id="tabcontent"> <ul class="hidden"> <li><a href="#">1111111111111111111111</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> </ul> <ul name="tabul"> <img src="imges/index_38.jpg" width="321" height="99" /><h4>小桥流水人家 -- 李坑</h4> <p><a href="#">李坑是一个以李姓聚居为主的古村落，距婺源县城12公里。李坑的建筑风格独特，是著名的徽派建筑。给人一种安静、祥和的气氛。李坑自古文风鼎盛、人才辈出。自宋至清，仕官富贾达百人，村里的文人留下传世著作达29部，南宋年间出...</a></p> <p> </p> </ul> <ul class="hidden"> <li><a href="#">3333333333333333333333</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> </ul> <ul class="hidden"> <li><a href="#">444444444444444444444444</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> </ul> <ul class="hidden"> <li><a href="#">55555555555555555555555</a></li> <li><a href="#">222222222xcC22222</a></li> <li><a href="#">2222222f s f22222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> </ul> <ul class="hidden"> <li><a href="#">6666666666666666666666</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> </ul> <ul class="hidden"> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> </ul> </div> </div> </canvas> </body> </html>
function tabChange(obj,id)
{
var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组
var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组
for(i=0;i<arrayul.length;i++)
{
if(obj==arrayli[i])
{
arrayli[i].className = "cli";
arrayul[i].className = "";
}
else
{
arrayli[i].className = "";
arrayul[i].className = "hidden";
}
}
}浏览器效果：
以上是关于鼠标滑动一次切换一个页面HTML+CSS+JS的主要内容，如果未能解决你的问题，请参考以下文章