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