回首望,曾经洋洋得意的代码现在不忍直视。曾经看起来碉堡的效果现在也能稍微弄点出来。社会在往前发展,人也不得不向前走。 参考于搜狗浏览器4.2版本首页的上下滚动效果。主要实现整个窗口的上下和左右滚动逻辑,还有很多可以拓展的空间。希望大家能多提意见与建议 ...
回首望,曾经洋洋得意的代码现在不忍直视。曾经看起来碉堡的效果现在也能稍微弄点出来。社会在往前发展,人也不得不向前走。
参考于搜狗浏览器4.2版本首页的上下滚动效果。主要实现整个窗口的上下和左右滚动逻辑,还有很多可以拓展的空间。希望大家能多提意见与建议。
代码如下:
HTML
<!doctype html><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta content="" name="keywords" /><meta content="" name="description" /><meta name="author" content="codetker" /><head><title>window对象滚动插件</title><link href="style/reset.css" rel="stylesheet" type="text/css"><link href="style/style.css" rel="stylesheet" type="text/css"><script type="text/javascript" src='/images/loading.gif' data-original="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src='/images/loading.gif' data-original="js/jquery.codetker.windowScroll.js"></script></head><body scroll="no"> <div class="wrap" style="dispaly:block;"> <div class="stageControl"> <ul> <li>stage1</li> <li>stage2</li> <li>stage3</li> <li>stage4</li> <li>stage5</li> </ul> </div> <div class="stage stage1"> <div class="pageControl"> <ul> <li>page1</li> <li>page2</li> <li>page3</li> </ul> </div> <div class="page page1"></div> <div class="page page2"></div> <div class="page page3"></div> </div> <div class="stage stage2"></div> <div class="stage stage3"></div> <div class="stage stage4"></div> <div class="stage stage5"></div> </div><script type="text/javascript"> $(document).ready(function(){ $(".wrap").windowScroll({ 'choose' : 0, 'verticalSpeed' : 2, //控制垂直滚动速度 'horizontalSpeed' : 1, 'objControlUl': '.wrap .stageControl' }); $(".stage1").windowScroll({ 'choose': 1, 'verticalSpeed' : 1, 'horizontalSpeed' : 1,//控制水平滚动速度 'objControlUl': '.stage1 .pageControl' }); });</script></body></html>
原标题:jQuery插件开发之windowScroll
关键词:Windows
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。