jQuery实现鼠标滚轮控制单个div上下翻动效果

1、新建html文档。

2、书写hmtl代艨位雅剖码。<div class="wrap"> <di即枢潋雳v class="left"> <div class="panel" style="background-color: #f00; color: #fff;"> <p>只有这边可以滚动</p> </div> <div class="panel" style="background-color: #0f0; color: #fff;"> <p>局部滚动似乎不太好用，如果上面有内容则会有偏移</p> </div> <div class="panel" style="background-color: #00f; color: #fff;"> <p>即使配合 offset 也不能很好的解决</p> </div> </div> <div class="right"> <p>这边不滚动</p> </div></div>

3、书写css代码。<style>* { margin: 0; padding: 0;}.wr锾攒揉敫ap { width: 1000px; margin: 0 auto; overflow: hidden; zoom: 1;}.left { float: left; width: 800px; height: 500px; overflow: hidden;}.right { float: right; width: 200px; height: 500px; background-color: #ddd;}p { font: 30px/500px "Microsoft Yahei"; text-align: center;}.hd { height: 100px; background-color: #0ff;}.bd { overflow: hidden; zoom: 1;}.ft { height: 100px; background-color: #0ff;}</style>

4、书写并添加js代码。<script src="jquery.min.js"></script><script src="js/jquery.easing.1.3.js"></script><script src="js/jquery.scrollify.min.js"></script><script>$(function() { $('.panel').css({'height': $('.left').height()}); $.scrollify({ section: '.panel', target: '.left' });});</script>

5、代码整体结构。

6、查看效果。