首页>>Jquery文字>>jQuery 简单的鼠标滑动tab(2014-01-09)

jQuery 简单的鼠标滑动tab

jQuery 简单的鼠标滑动tab
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="views">  
  2. <div class="view views-nav" id="nav">  
  3. <ul>  
  4. <li><a href="#what" data-pushview>标题1</a></li>  
  5. <li><a href="#how" data-pushview>标题2</a></li>  
  6. <li><a href="#where" data-pushview>标题3</a></li>  
  7. </ul>  
  8. </div>  
  9. <div class="views-main">  
  10. <div class="view" id="what">  
  11. <div class="view-content">  
  12. <h2>内容1</h2>  
  13. <ul class="view-nav clearfix">  
  14. <li class="view-nav-contents pull-left"><a href="#nav" data-popview>Contents</a></li>  
  15. <li class="view-nav-next pull-right"><a href="#how" data-pushview>How it works</a></li>  
  16. </ul>  
  17. </div>  
  18. </div>  
  19. <div class="view" id="how">  
  20. <div class="view-content">  
  21. <h2>内容2</h2>  
  22. <ul class="view-nav clearfix">  
  23. <li class="view-nav-contents pull-left"><a href="#nav" data-popview>Contents</a></li>  
  24. <li class="view-nav-next pull-right"><a href="#where" data-pushview>How it works</a></li>  
  25. </ul>  
  26. </div>  
  27. </div>  
  28. <div class="view" id="where">  
  29. <div class="view-content">  
  30. <h2>内容3</h2>  
  31. <p>www.freejs.net</p>  
  32. <ul class="view-nav clearfix">  
  33. <li class="view-nav-contents pull-left"><a href="#nav" data-popview>Contents</a></li>  
  34. </ul>  
  35. </div>  
  36. </div>  
  37. </div>  
  38. </div>  
  39. </div>  
  40.   
  41. <!-- this library removes the 300ms delay on browsers with touch UIs -->    
  42. <script src="vendor/fastclick.js"></script>    
  43. <script>  
  44. // "Zepto is a minimalist JavaScript library for modern browsers with a   
  45. // largely jQuery-compatible API." What this chunk of code does is   
  46. // determine which library to use (jQuery or Zepto), and then which   
  47. // scroll plugin to use. For more info, see http://zeptojs.com/#download   
  48. var useZepto = ('__proto__' in {})   
  49.   , lib = useZepto ? 'zepto' : 'jquery'   
  50.   , scrollPlugin = useZepto ? 'scroll' : 'scrollTo';   
  51. document.write(   
  52.   '<script src=vendor/' + lib + '.min.js></script>' +   
  53.   '<script src=vendor/' + lib + '.' + scrollPlugin + '.min.js></script>'   
  54. );   
  55. </script>    
  56.   
  57. <!-- including the (minified) plugin, because duh -->    
  58. <script src="lib/simpleslideview.min.js"></script>    
  59. <script>  
  60. // Here is a very basic implementation. '.views' will be   
  61. // the view container, any elements therein with a class of   
  62. // 'view' will be a view, and the only default option we're   
  63. // overriding is the duration of the animations.   
  64. $('.views').simpleSlideView({ duration: 250 });   
  65. </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_229.html