摘要：
html页面：12345678910111213141516171819202122˂!
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 functionnameone(){ 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='http://t.zoukankan.com/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 functionwindowAddMouseWheel() { 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 }