中尉
<html>
<head>
<title>鼠标经过左右弹开的jquery导航菜单 by 25175</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").mouseover(function(){
$(this).removeClass("inactive");
$(this).addClass("active");
$("li.active").animate({ width: "200px"}, 500 );
$("li.inactive").animate({ width: "100px"}, 500 );
});
$("li").mouseout(function(){
$(this).removeClass("active");
$(this).addClass("inactive");
$("li").animate({ width: "125px"}, 500 );
});
});
</script>
<style type="text/css">
ul li { list-style-type: none; width: 125px; height: 100px; margin-right: 10px; float: left; overflow: hidden; }
a img { border: 0; }
</style>
</head>
<body>
<ul>
<li class="inactive"><a href=""><img src="images/products.jpg" alt=""/></a></li>
<li class="inactive"><a href=""><img src="images/history.jpg" alt=""/></a></li>
<li class="inactive"><a href=""><img src="images/news.jpg" alt=""/></a></li>
<li class="inactive"><a href=""><img src="images/urideas.jpg" alt=""/></a></li>
</ul>
<a href="index1.html">竖向</a>
<div style="width:550px;margin:20px auto;">
<p><strong><a href="http://www.25175.com" target="_blank">25175</a></strong> </p>
</div>
</body>
</html>
购买记录
新兵
