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

 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>

 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 }

 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 }

 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 }