闪动当前选择以前写的JS已经删除了,而且全部是用CSS来完成的特效,省去了麻烦的代码.
查接看代码吧:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS特效</title>
<link href="st.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="show.js"></script>
<style>
*{margin:0px;padding:0px;}
#DV_img{width:810px;margin:auto;padding:10px 0 10px 10px;}
#DV_img li{float:left;display:inline;width:152px;margin:0 10px 10px 0;list-style:none;}
#DV_img li a img{width:128px;height:98px;border:none;border:1px solid #fff;}
#DV_img li a{display:block;text-decoration:none;color:#fff;position:relative;background:#999;border:1px solid #000;padding:10px;}
#DV_img li a:hover{display:block;color:#999;border:1px solid #999966;background:#E4E4E4;}
#DV_img li a:hover span{display:block;position:absolute;top:10px;left:10px;*top:10px!important;*left:10px!important;*top:11px;*left:0;background:#F07611;color:#fff;font-size:14px;font-weight:bold;}
#DV_img li a:hover img{width:128px;height:98px;border:none;border:1px solid #DF7B0D;}
#DV_img li a:hover em{color:#666;}
#DV_img li a span{display:none;width:10px;padding:4px 5px;}
#DV_img li a em{ font-style:normal;display:block;text-align:center;font-size:12px;line-height:20px;}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;}
.clearfix {display:block;}
</style>
</head>
<body>
<div id="DV_img">
<ul class="clearfix">
<li> <a href="#"><span>+</span><img src="5.jpg" alt="产品1" /><em>产品1</em></a></li>
<li> <a href="#"><span>+</span><img src="2.jpg" alt="产品1" /><em>产品2</em></a></li>
<li> <a href="#"><span>+</span><img src="3.jpg" alt="产品1" /><em>产品3</em></a></li>
<li> <a href="#"><span>+</span><img src="4.jpg" alt="产品1" /><em>产品4</em></a></li>
<li> <a href="#"><span>+</span><img src="5.jpg" alt="产品1" /><em>产品5</em></a></li>
<li> <a href="#"><span>+</span><img src="5.jpg" alt="产品1" /><em>产品6</em></a></li>
<li><a href="#"><span>+</span><img src="2.jpg" alt="产品1" /><em>产品7</em></a></li>
<li> <a href="#"><span>+</span><img src="4.jpg" alt="产品1" /><em>产品8</em></a></li>
<li> <a href="#"><span>+</span><img src="5.jpg" alt="产品1" /><em>产品9</em></a></li>
<li> <a href="#"><span>+</span><img src="3.jpg" alt="产品1" /><em>产品10</em></a></li>
</ul>
</div>
</body>
</html>