jquery.mousewheel插件使用
jquery中沒有鼠標滾輪事件，原生js中鼠標滾輪事件不兼容，可以使用jquery的滾時事件插件jquery.mousewheel.js
函數節流
js中有些事件的觸發頻率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面說的鼠標滾輪事件，在短時間內多處觸發執行綁定的函數，可以巧妙的使用定時器來減少觸發的次數，實現函數節流。
先看一下用js和css3結合做動畫：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery.js"></script> <script> $(function(){ //點擊按鈕開始動畫 $('#btn').click(function(){ //給.box添加另外一個樣式產生動畫 $('.box').addClass('moving') }) }) </script> <style> .box{ width:200px; height:200px; background-color:gold; margin:50px auto 0; transition:all 1s ease; } .moving{ transform:rotate(135deg); } </style> </head> <body> <input type="button" value="動畫" id="btn"> <div class="box"></div> </body> </html>
整屏滾動案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,ul{ margin:0; padding:0; } ul{list-style: none;} .page_con{ position: fixed; left:0; top:0; width:100%; overflow:hidden; } .page{ height:600px; position:relative; } .page1{background-color: orange} .page2{background-color: lightgreen} .page3{background-color: cyan} .page4{background-color: pink} .page5{background-color: lightblue} .point{ width:16px; height:176px; position:fixed; right:20px; top:50%; margin-top:-88px; } .point li{ width:13px; height:13px; margin:16px 0; border-radius:50%; border:2px solid #666; cursor:pointer; } .point .active{background-color: #666;} .main_con{ width:900px; height:400px; position: absolute; left:50%; top:50%; margin-left: -450px; margin-top: -200px; } .main_con .left_img{ width:363px; height:400px; float: left; position: relative; left: -50px; opacity: 0; filter: alpha(opacity=0); transition: all 1000ms ease 300ms; } .main_con .right_info{ width:500px; height: 300px; margin-top: 50px; float: right; font-size: 20px; line-height: 50px; color:#666; text-indent: 2em; text-align: justify; position: relative; right: -50px; opacity: 0; filter: alpha(opacity=0); transition: all 1000ms ease 300ms; } .moving .main_con .left_img{ left:0; opacity: 1; filter: alpha(opacity=100); } .moving .main_con .right_info{ right:0; opacity: 1; filter: alpha(opacity=100); } .main_con .right_img{ width:522px; height:400px; float: right; position: relative; right: -50px; opacity: 1; filter: alpha(opacity=0); transition: all 1000ms ease 300ms; } </style> <script src="js/jquery.js"></script> <script src="js/jquery.mousewheel.js"></script> <script> $(function(){ $pages = $('.page') //只要做screen的動畫就可以，改變它的top值就可以滾屏 $screen = $('.page_con') //獲取窗口高度 var $h = $(window).height(); var $point = $('.point li') //讓窗口高度等於獲取的高度 $pages.css({height:$h}); var $nowscreen = 0; var $len = $pages.length; var timer = null; $pages.eq(0).addClass('moving') $point.click(function(){ $nowscreen = $(this).index() $point.eq($nowscreen).addClass('active').siblings().removeClass('active') $screen.animate({top:-$h*$nowscreen},300) $pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving') }) //鼠標滾輪事件 $(window).mousewheel(function(event,dat){ clearTimeout(timer); timer = setTimeout(function(){ //向上滾時dat=1,向下滾dat=-1 if(dat==1) { $nowscreen--; } else { $nowscreen++; } if($nowscreen<0) {$nowscreen=0} if($nowscreen>$len-1) {$nowscreen=$len-1} $screen.animate({top:-$h*$nowscreen},300) $pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving') $point.eq($nowscreen).addClass('active').siblings().removeClass('active') },200) }) }) </script> </head> <body> <div class="page_con"> <div class="page page1"> <div class="main_con"> <div class="left_img"><img src="images/goods02.jpg" alt=""></div> <div class="right_info"> 艾詩可因修復肽是上海嘉博生物科技有限公司的核心產品，主要是修復敏感、紅血絲、抗皺等肌膚。 1986年美國科學家科恩博士因發現表皮生長因子(EGF)對表皮組織的主動調控作用而獲得了人類科學的最高獎 ——諾貝爾醫學獎，從此拉開了人類進入主動修復護膚的時代的序 </div> </div> </div> <div class="page page2"> <div class="main_con"> <div class="left_img"><img src="images/goods.jpg" alt=""></div> <div class="right_info"> 艾詩可因修復肽是上海嘉博生物科技有限公司的核心產品對表皮組織的主動調控作用而獲得了人類科學的最高獎 ——諾貝爾醫學獎，從此拉開了人類進入主動修復護膚的時代的序 </div> </div> </div> <div class="page page3"> <div class="main_con"> <div class="left_img"><img src="images/goods.jpg" alt=""></div> <div class="right_info"> 1986年美國科學家科恩博士因發現表皮生長因子(EGF)對表皮組織的主動調控作用而獲得了人類科學的最高獎 </div> </div> </div> <div class="page page4"> <div class="main_con"> <div class="left_img"><img src="images/goods02.jpg" alt=""></div> <div class="right_info"> 對表皮組織的主動調控作用而獲得了人類科學的最高獎 ——諾貝爾醫學獎，從此拉開了人類進入主動修復護膚的時代的序 </div> </div> </div> <div class="page page5"> <div class="main_con"> <div class="left_img"><img src="images/goods02.jpg" alt=""></div> <div class="right_info"> 艾詩可因修復肽是上海嘉博生物科技有限公司的核心產品，主要是修復敏感、紅血絲 </div> </div> </div> </div> </div>> <ul class="point"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>