js-实现鼠标滑轮滚动实现换页

Posted 樊琇鸿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js-实现鼠标滑轮滚动实现换页相关的知识,希望对你有一定的参考价值。

html页面:

 1 <!--首页一-->
 2 <div id="nav_div1">
    <div class="nav_size"></div>
  </
div> 3 4 <!--首页二--> 5 <div id="nav_div2"></div> 6 7 <!--首页三--> 8 <div id="nav_div3"></div> 9 10 <!--首页四--> 11 <div id="nav_div4"></div> 12 13 <!--首页五--> 14 <div id="nav_div5"></div> 15 16 <!--首页六--> 17 <div id="nav_div6"></div> 18 19 <!--首页七--> 20 <div id="nav_div7"></div> 21 22 <!--首页八--> 23 <div id="nav_div8"></div>

css设置:

 1 #nav_div1,#nav_div2,#nav_div3,#nav_div4,#nav_div5,#nav_div6,#nav_div7,#nav_div8{
 2     height: 656px;
 3     width: 1366px;
 4 }
 5 #nav_div1{
 6     background: url(../images/bj-imges/2_01.jpg) ;
 7     background-size:contain;
 8     margin-top: -4px;
 9 }
10 #nav_div2{
11     background: url(../images/bj-imges/2_03.gif);
12     background-size:contain;
13     margin-top: 0px;
14 }
15 #nav_div3{
16     background: url(../images/bj-imges/2_05.gif);
17     background-size:contain;
18     margin-top: -2px;
19 }
20 #nav_div4{
21     background: url(../images/bj-imges/2_07.gif);
22     background-size:contain;
23     margin-top: 0px;
24 }
25 #nav_div5{
26     background: url(../images/bj-imges/2_09.gif);
27     background-size:contain;
28     margin-top: -22px;
29 }
30 #nav_div6{
31     background: url(../images/bj-imges/2_11.gif);
32     background-size:contain;
33     margin-top: 0px;
34 }
35 #nav_div7{
36     background: url(../images/bj-imges/2_13.gif);
37     background-size:contain;
38     margin-top: 0px;
39 }
40 #nav_div8{
41     background: url(../images/bj-imges/2_16.gif);
42     background-size:contain;
43     margin-top: 0px;
44 }
 1 /*首页一*/
 2 .nav_size{
 3     height: 42px;
 4     width: 730px;
 5     margin-left: 630px;
 6     margin-top: 4px;
 7 }
 8 .text_name{
 9     float: left;
10     margin-top: 12px;
11     margin-left: 0px;
12     color: #dedede;
13     font-size: 12px;
14     width: 80px;
15     height: 24px;
16     text-align: center;
17 }
18 .text_name:hover{
19     margin-top: 12px;
20     background: #e2cda0;
21     width: 80px;
22     height: 24px;
23     line-height: 24px;
24     color: #342121;
25 }
26 .text_name1 a{
27     color: #dedede;
28     text-decoration: none;
29     font-size: 12px;
30     width: 80px;
31     height: 24px;
32 }
33 .text_name1 a:hover{
34     color: #342121;
35 }
36 .text_duname{
37     float: left;
38     margin-top: 12px;
39     margin-left: 20px;
40     color: #342121;
41     font-size: 12px;
42     background: #e2cda0;
43     width: 70px;
44     height: 24px;
45     text-align: center;
46     line-height: 24px;
47 }

 

js代码(插入数据):

 1 function nameone(){
 2     //定义一个数组存内容
 3         var arr=Array("首页","服务项目","场景餐饮定制","成功案例 ","关于国宴","活动策化","物料/餐费租赁","人才招聘","联系国宴");
 4 //初始化定义为空
 5     var tr="";
 6 //循环数组
 7     for(var i=0;i<arr.length;i++){
 8         //判断如果索引等于0设置一个单独的class  设置样式和属性
 9         if(i==0){
10             tr += "<div class=‘text_duname qing biaoshi"+i+"‘>"+arr[i]+"</div>";   //设置统一的class名,加样式
11      biaoshi"+i+"每次循环都索引加一 
12 }else if(i==3){ //判断如果索引等于3 加一个锚链接 13 tr += "<div class=‘text_name qing text_name1 biaoshi"+i+"‘><a href=‘../index2/index.html‘>"+arr[i]+"<a/></div>"; 14 }else{ //剩余所有数组内容 15 tr += "<div class=‘text_name qing biaoshi"+i+"‘>"+arr[i]+"</div>"; 16  } 17  } 18 // 将内容插入到这个标签中 19 $(".nav_size").html(tr); 20 }

js代码(操作页面实现滑轮滚动换页并且每当换页导航会跳到相应的位置):

 1 function windowAddMouseWheel() {  
 2     var i = 0;
 3     var scrollFunc = function (e) {  
 4         e = e || window.event;   // e 代表事件(event)对象,即所谓的事件驱动源
 5         if (e.wheelDelta) {  //判断浏览器IE,谷歌滑轮事件  
 6             if (e.wheelDelta > 0) { //当滑轮向上滚动时 
 7                 //alert("滑轮向上滚动i"+e.wheelDelta); 
 8                 i++;
 9                 window.scrollTo(0,660*i);
10             }  
11             if (e.wheelDelta < 0 ) { //当滑轮向下滚动时  
12                 //alert("滑轮向下滚动"+e.wheelDelta); 
13                 i--;
14                 window.scrollTo(0,660*i);
15             }  
16         }else if(e.detail){  //Firefox滑轮事件  
17             if(e.detail>0){ //当滑轮向上滚动时  
18                 i++;
19                 window.scrollTo(0,660*i);    //设置上滑页面的高度
20                 //alert("滑轮向上滚动"+i);
21                 $(".qing").css("background-color","");   //清空所有颜色
22                 $(".biaoshi"+i).css("background-color","#ccc");   //只有索引到这个位置时,内容会单独显示设置的样式
23             }  
24             if (e.detail< 0) { //当滑轮向下滚动时  
25                 i--;
26                 window.scrollTo(0,660*i);   //设置下滑页面的高度
27                 //alert("滑轮向下滚动"+i); 
28                 $(".qing").css("background-color","");    //清空所有颜色
29                 $(".biaoshi"+i).css("background-color","#dedede");     //只有索引到这个位置时,内容会单独显示设置的样式
30                 $(".biaoshi"+i).css("line-height","24px");
31             }  
32         }  
33     };  
34     //给页面绑定滑轮滚动事件  
35     if (document.addEventListener) {  
36         document.addEventListener(‘DOMMouseScroll‘, scrollFunc, false);  
37     }  
38 //滚动滑轮触发scrollFunc方法  
39     window.onmousewheel = document.onmousewheel = scrollFunc;  
40 } 

 



以上是关于js-实现鼠标滑轮滚动实现换页的主要内容,如果未能解决你的问题,请参考以下文章

css如何在页面内出现滚动条的地方禁止鼠标滑轮滚动

Winform鼠标滑轮控制自定义滚动条

为啥鼠标滑轮可以滚动div里面的内容,手机端手指滑动就不能滑动

jquery.slides.js图片轮播怎样调用鼠标滑轮滚动的功能

java中怎么设置鼠标滑轮来滚动java滚动条滚动的速度

jQ中鼠标滚轮事件事件吗