鼠标滚动局部-选项卡
2016-03-25 15:56
585 查看
鼠标滚动局部-选项卡
效果如下：
html：
<body>
<div class="box">
<a href="javascript:;" class="btn_pre" id="btnPre">上一页</a>
<div class="change_box">
<ul class="change_box_list" id="changeBoxList">
<li><a href="javascript:;" class="btn_h">See0</a></li>
<li><a href="javascript:;" class="btn">See1</a></li>
<li><a href="javascript:;" class="btn">See2</a></li>
<li><a href="javascript:;" class="btn">See3</a></li>
<li><a href="javascript:;" class="btn">See4</a></li>
<li><a href="javascript:;" class="btn">See5</a></li>
<li><a href="javascript:;" class="btn">See6</a></li>
<li><a href="javascript:;" class="btn">See7</a></li>
<li><a href="javascript:;" class="btn">See8</a></li>
<li><a href="javascript:;" class="btn">See9</a></li>
<li><a href="javascript:;" class="btn">See10</a></li>
<li><a href="javascript:;" class="btn">See11</a></li>
<li><a href="javascript:;" class="btn">See12</a></li>
<li><a href="javascript:;" class="btn">See13</a></li>
<li><a href="javascript:;" class="btn">See14</a></li>
<li><a href="javascript:;" class="btn">See15</a></li>
<li><a href="javascript:;" class="btn">See16</a></li>
<li><a href="javascript:;" class="btn">See17</a></li>
<li><a href="javascript:;" class="btn">See18</a></li>
<li><a href="javascript:;" class="btn">See19</a></li>
<li><a href="javascript:;" class="btn">See20</a></li>
<li><a href="javascript:;" class="btn">See21</a></li>
</ul>
</div>
<a href="javascript:;" class="btn_next" id="btnNext">下一页</a>
</div>
<div class="event_box">
<ul class="event_list" id="eventList">
<li><a href="javascript:;" class="">See0</a></li>
<li><a href="javascript:;" class="">See1</a></li>
<li><a href="javascript:;" class="">See2</a></li>
<li><a href="javascript:;" class="">See3</a></li>
<li><a href="javascript:;" class="">See4</a></li>
<li><a href="javascript:;" class="">See5</a></li>
<li><a href="javascript:;" class="">See6</a></li>
<li><a href="javascript:;" class="">See7</a></li>
<li><a href="javascript:;" class="">See8</a></li>
<li><a href="javascript:;" class="">See9</a></li>
<li><a href="javascript:;" class="">See10</a></li>
<li><a href="javascript:;" class="">See11</a></li>
<li><a href="javascript:;" class="">See12</a></li>
<li><a href="javascript:;" class="">See13</a></li>
<li><a href="javascript:;" class="">See14</a></li>
<li><a href="javascript:;" class="">See15</a></li>
<li><a href="javascript:;" class="">See16</a></li>
<li><a href="javascript:;" class="">See17</a></li>
<li><a href="javascript:;" class="">See18</a></li>
<li><a href="javascript:;" class="">See19</a></li>
<li><a href="javascript:;" class="">See20</a></li>
<li><a href="javascript:;" class="">See21</a></li>
</ul>
</div>
</body>
style：
.box{width: 300px; height: 500px; border: 1px solid #ccc; background-color: #ccc; float: left;}
.btn_pre,.btn_next{display: block; width: 300px; height: 50px; background-color: #693369; text-align: center; line-height: 50px; font-size: 30px; color: #ccc;}
.change_box{width: 300px; height: 700px; background-color: #696969; position: relative; overflow: hidden;}
.change_box_list{width: 300px; overflow: hidden; list-style: none; margin: 0px; padding: 0px; position: absolute; left: 0px;}
.change_box_list li{width: 300px; height: 100px; text-align: center; font-size: 40px; line-height: 100px; }
.change_box_list li a{display: block; widows: 300px; height: 100px; }
.change_box_list li .btn_h{display: block; widows: 300px; height: 100px; background-color: #f00;}
.event_box{width: 300px; height: 500px; float: left; display: inline; overflow: hidden; }
.event_list{width: 300px; overflow: hidden; list-style: none; margin: 0px; padding: 0px;}
.event_list li{width: 300px; height: 500px; background-color: #052; font-size: 100px; line-height: 500px; color: #fff; text-align: center;}
javascript：
var btnPre = document.getElementById("btnPre");
var btnNext = document.getElementById("btnNext");
var changeBoxList = document.getElementById("changeBoxList");
var eventList = document.getElementById("eventList");
var eventListLi = eventList.getElementsByTagName("li");
var changeBoxListA = changeBoxList.getElementsByTagName("a");
var getBody = document.body;
//显示区域为几个，就写几个
var keepNum = 7;
//获取需要滚动的值(整体ul的高度减去显示区域的高度)
var hehe = changeBoxList.offsetHeight - changeBoxListA[0].offsetHeight * keepNum;
//Li的高度
var liHight = changeBoxList.children[0].offsetHeight;
//点击变量
var num = 0;
//点击每个单独的员工
for(var i = 0; i<=changeBoxListA.length-1; i++ ){
changeBoxListA[i].index = i;
changeBoxListA[i].onclick = function(){
for(var i = 0; i<=changeBoxListA.length-1; i++ ){
eventListLi[i].style.display = "none";
changeBoxListA[i].className = "";
}
eventListLi[this.index].style.display = "block";
changeBoxListA[this.index].className = "btn_h";
}
}
// 禁止火狐body默认滚动事件
var bodyMoveFun = function(e){
e.preventDefault();
}
var scrollFunc=function(e){
e=e || window.event;
if(e.wheelDelta){ //IE/Opera/Chrome
if(e.wheelDelta>0){
if( num <= 0){
changeBoxList.style.top = 0 + "px";
}else{
num--;
changeBoxList.style.top = -(num * liHight ) + "px";
}
}else{
//判断整体ul的top值是否大于需要滚动的值，如果大于，代表
if( changeBoxList.offsetTop <= -hehe ){
if( changeBoxList.offsetTop == 0 ){
changeBoxList.style.top = 0 + "px";
}else{
changeBoxList.style.top = -hehe + "px";
}
}else{
num++;
changeBoxList.style.top = -(num * liHight) + "px";
}
}
}else if(e.detail){ //Firefox
if(e.detail<0){
if( num <= 0){
changeBoxList.style.top = 0 + "px";
}else{
num--;
changeBoxList.style.top = -(num * liHight ) + "px";
}
}else{
//判断整体ul的top值是否大于需要滚动的值，如果大于，代表
if( changeBoxList.offsetTop <= -hehe ){
if( changeBoxList.offsetTop == 0 ){
changeBoxList.style.top = 0 + "px";
}else{
changeBoxList.style.top = -hehe + "px";
}
}else{
num++;
changeBoxList.style.top = -(num * liHight) + "px";
}
}
}
}
changeBoxList.onmousemove = function(){
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false); //Firefox滚动事件
document.addEventListener('DOMMouseScroll',bodyMoveFun,false); //Firefox禁止body滚动
}
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 滚动事件
getBody.onmousewheel=function(){ //IE/Opera/Chrome禁止body滚动
return false;
}
}
changeBoxList.onmou
a97a
seleave=function(){
if(document.addEventListener){
document.removeEventListener('DOMMouseScroll',scrollFunc,false);//解除Firefox滚动事件
document.removeEventListener('DOMMouseScroll',bodyMoveFun,false);//解除Firefox禁止body滚动
}
window.onmousewheel=document.onmousewheel=null;//IE/Opera/Chrome 解除滚动事件
getBody.onmousewheel=function(){ //IE/Opera/Chrome 解除body滚动条
return true;
}
}
PS：其中碰到的一些问题在下篇文章细说！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 微软无线镭射简报鲨8000激光笔记本鼠标 - (2)
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法