动画切换效果

js
<script>
$(function(){
	$("#cpnav li").mousemove(function(){
		var $qq=$("#cpnav li").index($(this));
		
		$(".cpm").css("display","none");
		$(".cpm").eq($qq).show();
	  $("#cpnav li").css("background","#fff");
	  $(this).css("background","#eee");
	  //$("#show").text($qq+"---"+$vv);
	});
});
</script>

 

css

<style>
*{ padding:0; margin:0;}
body{ font-size:14px; color:#666}
a{ text-decoration:none; color:#333}
.box{ width:950px; margin:10px auto; }
#cpbox{ width:950px; height:220px; overflow:hidden; font-family:"微软雅黑"}
#cpbox .cpbox{}
#cpbox .cpbox .cpm{width:950px; height:220px; float:left; text-align:center; display:none}
#cpbox .cpbox .cpm h1{ line-height:50px; color:#009999}
#cpbox .cpbox .cpm h2{ padding:10px 30px; font-size:18px; text-align:left; font-weight:normal}
#cpbox .cpbox .cpm p{ font-size:12px}
#cpnav li{ float:left; width:300px; float:left; height:70px; border:1px solid #ccc; margin:5px;}
#cpnav li a{padding:5px; display:block; line-height:1.6em;}
#cpnav li a h3{ font-size:14px; color:#009999}
</style>

html
<div class="box">
<div id="cpbox">
	<div class="cpbox">
		<div class="cpm" style="display:block">
			<h1>是一个很不错的产品是一个很不错的产品</h1>
			<h2>是一个很不错的产品是一个很不错的产品是一个很不错的产品是一个很不错的产品是一个很不错的产品是一个很不错的产品</h2>
			<p>点击看看吧</p>
		</div>
		<div class="cpm">
			<h1>错的产品是一个很是一个很不不错的产品</h1>
			<h2>不错的产品是一个很不错的水电费错的产品是一个很不错的产品是一个很说的个很不错的产品</h2>
			<p>点击看看吧</p>
		</div>
		<div class="cpm">
			<h1>水电费个很不错的产品是一个很说的</h1>
			<h2>是一错的产品很不错个很不的产品是一个很不错的产品是一个很不错的产品是一个很不错的产品</h2>
			<p>点击看看吧</p>
		</div>
		<div class="cpm">
			<h1>水电费体育很不错的产品</h1>
			<h2>是一个很不错的体育产品是一个很不错的产品是一个很不错的产品是一个很不错的产品是一个很体育</h2>
		</div>
		<div class="cpm">
			<h1>是一dfg 的产品</h1>
			<h2>而人一个很不错的产品是一个很不错的产品是一个很不错的产品是一个很不错的产品是一个很不错的产品</h2>
			<p>点击看看吧</p>
		</div>
		<div class="cpm">
			<h1>电饭锅的说的的产品</h1>
			<h2>瘦瘦的个很不错的产品是说的说的个很不错的产品是一个很不水电费的产品是一个很不错的产品</h2>
			<p>点击看看吧</p>
		</div>
		<div class="cpm">
			<h1>个很不错的产品是一个很不错的产品是一</h1>
			<h2>不错很不的产品是一个很不错的产品是一个很不错是一个很不错的产品是一个很的产品是一个错的产品是一个很不错的产品</h2>
			<p>点击看看吧</p>
		</div>
		<div class="cpm">
			<h1>个很不是一产错的是一个很产品不错的品</h1>
			<h2>很不错的产品是一个是一个很是不错的产品是一个错的产品是一个很很不不错的产品一个很不错的产品是一个很不错的产品</h2>
			<p>点击看看吧</p>
		</div>
		<div class="cpm">
			<h1>个很不是一产错的是一个很产品不错的品</h1>
			<h2>很不错的产品是一个是一个很是不错的产品是一个错的产品是一个很很不不错的产品一个很不错的产品是一个很不错的产品</h2>
			<p>点击看看吧</p>
		</div>
	</div>
</div>
<ul id="cpnav">
	<li><a href=""><h3>产品一个个</h3><p>是一个很不错的产品啊下hid</p><p>100-3000元</p></a></li>
	<li><a href=""><h3>产品一个个</h3><p>是一个很不错的产品啊下hid</p><p>100-3000元</p></a></li>
	<li><a href=""><h3>产品一个个</h3><p>是一个很不错的产品啊下hid</p><p>100-3000元</p></a></li>
	<li><a href=""><h3>产品一个个</h3><p>是一个很不错的产品啊下hid</p><p>100-3000元</p></a></li>
	<li><a href=""><h3>产品一个个</h3><p>是一个很不错的产品啊下hid</p><p>100-3000元</p></a></li>
	<li><a href=""><h3>产品一个个</h3><p>是一个很不错的产品啊下hid</p><p>100-3000元</p></a></li>
	<li><a href=""><h3>产品一个个</h3><p>是一个很不错的产品啊下hid</p><p>100-3000元</p></a></li>
	<li><a href=""><h3>产品一个个</h3><p>是一个很不错的产品啊下hid</p><p>100-3000元</p></a></li>
	<li><a href=""><h3>产品一个个</h3><p>是一个很不错的产品啊下hid</p><p>100-3000元</p></a></li>
</ul>
</div>

posted @ 2011-09-28 13:57  5811  阅读(180)  评论(0)    收藏  举报