js-實現鼠標滑輪滾動實現換頁
阿新 • • 發佈：2018-03-16
css else false 所有 body 瀏覽器 event 頁面 代碼
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-實現鼠標滑輪滾動實現換頁