Ransom，一个简单的jQuery选项卡菜单，带有动画

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ransom，一个简单的jQuery选项卡菜单，带有动画相关的知识，希望对你有一定的参考价值。

Hovering over a ransomTab animates in the ransomStrip of the same index
  1. <script>
  2. 	$(function(){
  3.   	// Document is ready
  4. 		$('.ransomStrip').not('.ransomStrip:eq(0)').animate({left: '-400px'});
  5. 		$('.ransomTab:eq(0)').addClass('ransomTabActive');
  6. 		$('.ransomTab').hover(function(){
  7. 			var indy = $('.ransomTab').index(this);
  8. 			$(this).addClass('ransomTabActive');
  9. 			$('.ransomTab').not(this).removeClass('ransomTabActive');
  10. 			$('.ransomStrip').not('.ransomStrip:eq('+indy+')').animate({left: '-400px'});
  11. 			$('.ransomStrip:eq('+indy+')').animate({left: '0px'});
  12. 		});
  13. 	});
  14. </script>
  15. </head>
  16.  
  17. <body class="">
  18. 	<h1>Ransom <em>by Cirrostratus Design Company</em></h1>
  19.     <h2>A jQuery-powered tab menu inspired by iStockphoto.com</h2>
  20. 	<div id="ransom">
  21.     	<div id="ransomMain">
  22.     	</div><!--ransomMain-->
  23.         <div id="ransomTabs">
  24.             <div class="ransomTab">
  25.             	<p>Web</p>
  26.             </div><!--ransomTab-->
  27.             <div class="ransomTab">
  28.             	<p>Illustrations</p>
  29.             </div><!--ransomTab-->
  30.             <div class="ransomTab">
  31.             	<p>Video</p>
  32.             </div><!--ransomTab-->
  33.         </div><!--ransomTabs-->
  34.  
  35.         <div class="ransomStrip" id="Web">
  36.             <div class="ransomPrice">
  37.             	<p>$10</p>
  38.                 <small>web</small>
  39.             </div><!--ransomPrice-->
  40.             <div class="ransomPrice">
  41.             	<p>$20</p>
  42.                 <small>web</small>
  43.             </div><!--ransomPrice-->
  44.             <div class="ransomPrice">
  45.             	<p>$40</p>
  46.                 <small>web</small>
  47.             </div><!--ransomPrice-->
  48.             <div class="ransomPrice">
  49.             	<p>$50</p>
  50.                 <small>web</small>
  51.             </div><!--ransomPrice-->
  52.         </div><!--ransomStrip-->
  53.  
  54.         <div class="ransomStrip" id="Illustrations">
  55.             <div class="ransomPrice">
  56.             	<p>$5</p>
  57.                 <small>ill</small>
  58.             </div><!--ransomPrice-->
  59.             <div class="ransomPrice">
  60.             	<p>$30</p>
  61.                 <small>ill</small>
  62.             </div><!--ransomPrice-->
  63.             <div class="ransomPrice">
  64.             	<p>$40</p>
  65.                 <small>ill</small>
  66.             </div><!--ransomPrice-->
  67.             <div class="ransomPrice">
  68.             	<p>$60</p>
  69.                 <small>ill</small>
  70.             </div><!--ransomPrice-->
  71.             <div class="ransomPrice">
  72.             	<p>$90</p>
  73.                 <small>ill</small>
  74.             </div><!--ransomPrice-->
  75.         </div><!--ransomStrip-->
  76.  
  77.         <div class="ransomStrip" id="Video">
  78.             <div class="ransomPrice">
  79.             	<p>$15</p>
  80.                 <small>vid</small>
  81.             </div><!--ransomPrice-->
  82.             <div class="ransomPrice">
  83.             	<p>$25</p>
  84.                 <small>vid</small>
  85.             </div><!--ransomPrice-->
  86.             <div class="ransomPrice">
  87.             	<p>$50</p>
  88.                 <small>vid</small>
  89.             </div><!--ransomPrice-->
  90.         </div><!--ransomStrip-->
  91.  
  92.     </div><!--ransom-->

以上是关于Ransom，一个简单的jQuery选项卡菜单，带有动画的主要内容，如果未能解决你的问题，请参考以下文章

jquery：如何将菜单栏链接到选项卡

jquery带参数选项卡4

带按钮的jQuery字段集选项卡

jquery 选项卡切换 带背景图片

jQuery EasyUI 右键菜单--关闭标签/选项卡

如何使下拉菜单宽度与选项卡大小相同？