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>