jQuery 简单的鼠标滑动tab
jQuery 简单的鼠标滑动tab
XML/HTML Code
- <div class="views">
- <div class="view views-nav" id="nav">
- <ul>
- <li><a href="#what" data-pushview>标题1</a></li>
- <li><a href="#how" data-pushview>标题2</a></li>
- <li><a href="#where" data-pushview>标题3</a></li>
- </ul>
- </div>
- <div class="views-main">
- <div class="view" id="what">
- <div class="view-content">
- <h2>内容1</h2>
- <ul class="view-nav clearfix">
- <li class="view-nav-contents pull-left"><a href="#nav" data-popview>Contents</a></li>
- <li class="view-nav-next pull-right"><a href="#how" data-pushview>How it works</a></li>
- </ul>
- </div>
- </div>
- <div class="view" id="how">
- <div class="view-content">
- <h2>内容2</h2>
- <ul class="view-nav clearfix">
- <li class="view-nav-contents pull-left"><a href="#nav" data-popview>Contents</a></li>
- <li class="view-nav-next pull-right"><a href="#where" data-pushview>How it works</a></li>
- </ul>
- </div>
- </div>
- <div class="view" id="where">
- <div class="view-content">
- <h2>内容3</h2>
- <p>www.freejs.net</p>
- <ul class="view-nav clearfix">
- <li class="view-nav-contents pull-left"><a href="#nav" data-popview>Contents</a></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- this library removes the 300ms delay on browsers with touch UIs -->
- <script src="vendor/fastclick.js"></script>
- <script>
- // "Zepto is a minimalist JavaScript library for modern browsers with a
- // largely jQuery-compatible API." What this chunk of code does is
- // determine which library to use (jQuery or Zepto), and then which
- // scroll plugin to use. For more info, see http://zeptojs.com/#download
- var useZepto = ('__proto__' in {})
- , lib = useZepto ? 'zepto' : 'jquery'
- , scrollPlugin = useZepto ? 'scroll' : 'scrollTo';
- document.write(
- '<script src=vendor/' + lib + '.min.js></script>' +
- '<script src=vendor/' + lib + '.' + scrollPlugin + '.min.js></script>'
- );
- </script>
- <!-- including the (minified) plugin, because duh -->
- <script src="lib/simpleslideview.min.js"></script>
- <script>
- // Here is a very basic implementation. '.views' will be
- // the view container, any elements therein with a class of
- // 'view' will be a view, and the only default option we're
- // overriding is the duration of the animations.
- $('.views').simpleSlideView({ duration: 250 });
- </script>
相关推荐
周公周金桥 2020-09-06
大象从不倒下 2020-07-31
AlisaClass 2020-07-19
MaureenChen 2020-04-21
xingguanghai 2020-03-13
teresalxm 2020-02-18
木四小哥 2013-05-14
SoShellon 2013-06-01
Simagle 2013-05-31
羽化大刀Chrome 2013-05-31
waterv 2020-01-08
LutosX 2013-07-29
vanturman 2013-06-27
wutongyuq 2013-04-12
luoqu 2013-04-10
today0 2020-09-22
89520292 2020-09-18
bigname 2020-08-25