你的位置:首页 > 软件开发 > Java > jQuery插件开发之windowScroll

jQuery插件开发之windowScroll

发布时间:2015-07-13 21:00:26
回首望,曾经洋洋得意的代码现在不忍直视。曾经看起来碉堡的效果现在也能稍微弄点出来。社会在往前发展,人也不得不向前走。 参考于搜狗浏览器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 (#换成@)。

可能感兴趣文章

我的浏览记录