效果出不来，求救！
效果图：
代码：
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>简单实用的垂直导航菜单</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">.sv3 dl,.sv3 dt,.sv3 dd{ padding:0; margin:0;}.sv3{ width:200px; border:1px solid #BFC7D9;}.sv3 dl{ width:200px; height:380px; background:#fff; overflow:hidden;}.sv3 dt{ padding:5px 10px; height:13px; font-size:13px; color:#000; background:#fff; border-bottom:1px dashed #ccc; border-top:1px dashed #ccc;}.sv3 dl.on dt{ background:#fff; color:#000; font-weight:bold;}.sv3 dd{ padding:10px; color:#333; font-size:12px; line-height:1.5em;}.sv3 dd a:link,.sv3 dd a:visited,.sv3 dd a:hover,.sv3 dd a:active{ color:#333; display:block; text-align:right;}#idSlideView3 dl dt{background-image:url(http://hi.csdn.net/attachment/201201/15/10143223_1326660324Jm24.gif); background-repeat:no-repeat;}#idSlideView3 dl dt{ padding-left:15px; line-height:22px;}</style></head><body><h3>简单实用的垂直导航菜单</h3><div id="idSlideView3" class="sv3"> <dl class="on"> <dt>网页特效 </dt> <dd> 导航菜单</dd> </dl> <dl> <dt> 层与布局</dt> <dd> 内容二 </dd> </dl> <dl> <dt> 表单相关</dt> <dd> 内容三 </dd> </dl> <dl> <dt> ASP源码 </dt> <dd> 内容四</dd> </dl> <dl> <dt> PHP源码 </dt> <dd> 内容五 </dd> </dl> <dl> <dt> .NET源码 </dt> <dd> 内容六 </dd> </dl> <dl> <dt> SQL数据库 </dt> <dd> 内容七 </dd> </dl> <dl> <dt> JAVA源码 </dt> <dd> 内容八 </dd> </dl> <dl> <dt> 移动开发 </dt> <dd> 内容九 </dd> </dl><dl> <dt> 技术前沿 </dt> <dd> 内容十 </dd> </dl></div><script language="javascript">function SlideView(e){ for(var r=document.getElementById(e).getElementsByTagName('dl'),c=clearInterval,i=-1,p=r[0],j; j=r[++i];){ j.style.height=(i?24:100)+'px'; j.onmouseover=function(){clearTimeout(j);var i=this;j=setTimeout(function(){if(p!=i)_(p,100,24)(p=i,24,100)},200)}; } function _(el,f,t){ c(el.$1);el.className=f>t?'':'on'; return el.$1=setInterval(function(){el.style.height=(f+=Math[f>t?'floor':'ceil']((t-f)*.3))+'px';if (f==t)c(el.$1)},10),_ }};new SlideView( "idSlideView3");</script></body></html>显示的图片是错位的。。求解！！！
[解决办法]
#idSlideView3 dl dt{background-image:url(http://hi.csdn.net/attachment/201201/15/10143223_1326660324Jm24.gif);
background-repeat:no-repeat; background-position:5px 5px; padding-left:25px;
}
[解决办法]
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>【荐】JS+CSS布局的人气列表切换效果丨芯晴网页特效丨CsrCode.Cn</title><script type="text/javascript">var show_king_id = 1;function show_king_list(e,k){ if(show_king_id == k) return true; o = document.getElementById("a"+show_king_id); o.className = "bg"; e.className = " "; show_king_id = k;}var show_kinga_id = 1;function show_kinga_list(f,l){ if(show_kinga_id == l) return true; o = document.getElementById("b"+show_kinga_id); o.className = "bg"; f.className = " "; show_kinga_id = l;}</script><style type="text/css">*{margin: 0;padding: 0;}body {font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#666666;}.door_container {width:204px; background:#fff; border:1px solid #ccc;margin:20px auto;}.door_container .TabTitle {height:30px; margin-bottom:6px;}.door_container .TabTitle li {list-style:none;float:left;width:100px;height:36px;cursor:pointer;padding-left:2px;line-height:28px;color:#7c7c7c;font-size:14px;text-align:center;font-weight:bold;background:#DDDDDD;}.door_container .TabTitle .active {color:#0066CC;background:#fff;}.door_container .TabTitle .normal {color:#7c7c7c;}.door_container .TabContent {width:198px; background:#fff; padding:3px;}.none {display: none;}.star{width:198px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.star dl{width:198px;margin:2px 0;float:left;}.star dl dd{float:left;margin-left:8px;line-height:18px;}.star dl dt{float:left;}.bg{width:198px;margin:2px 0;background:#e1e1e1;float:left;}.sl01{background:#0066CC;margin:15px 5px 0 5px;width:25px;height:18px;padding-top:7px;text-align:center;font-weight:bold;color:#FFF;}.sl02 img{border:1px solid #999999;padding:3px; width:50px; height:50px; display:block;}.sl03 a{color:#0066CC;text-decoration:underline;}.sl03 a:hover{color:#FF0084;text-decoration:none;}.sl04{background:#CCCCCC;}.sl05{color:#FF0084;}.bg .sl01{background:#fff;margin:5px 5px 0 5px;width:25px;height:18px;padding-top:7px;text-align:center;font-weight:bold;color:#0066CC;}.bg .sl02 img{display:none;}.bg .sl03{width:140px;}.bg .sl04{background:#CCCCCC;width:155px;}.bg .sl05{display:none;}</style></head><body><div class="door_container"> <div class="TabContent"> <div class="star"> <dl id=a1 onmouseover=show_king_list(this,1);> <dt class="sl01">01</dt> <dt class="sl02"><a href="http://www.7caidy.com"><img src="/images/s1.jpg" width=50px height=50px alt="" /></a></dt> <dd class="sl03"><a href="http://www.7caidy.com">csr04</a></dd> <dd class="sl04">24岁 浙江·杭州</dd> <dd class="sl05">人气:987654</dd> </dl> <dl class=bg id=a2 onmouseover=show_king_list(this,2);> <dt class="sl01">02</dt> <dt class="sl02"><a href="http://www.33567.cn"><img src="/images/s2.jpg" width=50px height=50px alt="" /></a></dt> <dd class="sl03"><a href="http://www.33567.cn">User Name</a></dd> <dd class="sl04">24岁 广东·广州</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class=bg id=a3 onmouseover=show_king_list(this,3);> <dt class="sl01">03</dt> <dt class="sl02"><a href="http://so.7caidy.com"><img src="/images/s3.jpg" width=50px height=50px alt="" /></a></dt> <dd class="sl03"><a href="http://so.7caidy.com">User Name</a></dd> <dd class="sl04">24岁 广东·广州</dd> <dd class="sl05">人气:1243178</dd> </dl> </div> <div class="none"> <div class="star"> <dl id=b1 onmouseover=show_kinga_list(this,1);> <dt class="sl01">01</dt> <dt class="sl02"><a href="http://www.CsrCode.cn"><img src="/images/s4.jpg" width=50px height=50px alt="" /></a></dt> <dd class="sl03"><a href="http://www.CsrCode.cn">User Name</a></dd> <dd class="sl04">24岁 广东·广州</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class=bg id=b2 onmouseover=show_kinga_list(this,2);> <dt class="sl01">02</dt> <dt class="sl02"><a href="http://sobook.33567.cn"><img src="/images/s5.jpg" width=50px height=50px alt="" /></a></dt> <dd class="sl03"><a href="http://sobook.33567.cn">User Name</a></dd> <dd class="sl04">24岁 广东·广州</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class=bg id=b3 onmouseover=show_kinga_list(this,3);> <dt class="sl01">03</dt> <dt class="sl02"><a href="http://changshi.csrcode.cn"><img src="/images/s6.jpg" width=50px height=50px alt="" /></a></dt> <dd class="sl03"><a href="http://changshi.csrcode.cn">User Name</a></dd> <dd class="sl04">24岁 广东·广州</dd> <dd class="sl05">人气:1243178</dd> </dl> </div> </div> </div></div></body></html>
[解决办法]
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>简单实用的垂直导航菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> .sv3 dl, .sv3 dt, .sv3 dd { padding: 0; margin: 0; } .sv3 { width: 200px; border: 1px solid #BFC7D9; } .sv3 dl { width: 200px; height: 380px; background: #fff; overflow: hidden; } .sv3 dt { padding: 5px 10px; height: 13px; font-size: 13px; color: #000; background: #fff; border-bottom: 1px dashed #ccc; border-top: 1px dashed #ccc; } .sv3 dl.on dt { background: #fff; color: #000; font-weight: bold; } .sv3 dd { padding: 10px; color: #333; font-size: 12px; line-height: 1.5em; } .sv3 dd a:link, .sv3 dd a:visited, .sv3 dd a:hover, .sv3 dd a:active { color: #333; display: block; text-align: right; } #idSlideView3 dl dt { background-image: url(http://hi.csdn.net/attachment/201201/15/10143223_1326660324Jm24.gif); background-repeat: no-repeat; } #idSlideView3 dl dt { padding-left: 15px; line-height: 15px; } </style></head><body> <h3> 简单实用的垂直导航菜单</h3> <div id="idSlideView3" class="sv3"> <dl class="on"> <dt>网页特效 </dt> <dd> 导航菜单</dd> </dl> <dl> <dt>层与布局</dt> <dd> 内容二 </dd> </dl> <dl> <dt>表单相关</dt> <dd> 内容三 </dd> </dl> <dl> <dt>ASP源码 </dt> <dd> 内容四</dd> </dl> <dl> <dt>PHP源码 </dt> <dd> 内容五 </dd> </dl> <dl> <dt>.NET源码 </dt> <dd> 内容六 </dd> </dl> <dl> <dt>SQL数据库 </dt> <dd> 内容七 </dd> </dl> <dl> <dt>JAVA源码 </dt> <dd> 内容八 </dd> </dl> <dl> <dt>移动开发 </dt> <dd> 内容九 </dd> </dl> <dl> <dt>技术前沿 </dt> <dd> 内容十 </dd> </dl> </div> <script language="javascript"> function SlideView(e) { for (var r = document.getElementById(e).getElementsByTagName('dl'), c = clearInterval, i = -1, p = r[0], j; j = r[++i]; ) { j.style.height = (i ? 24 : 100) + 'px'; j.onmouseover = function () { clearTimeout(j); var i = this; j = setTimeout(function () { if (p != i) _(p, 100, 24)(p = i, 24, 100) }, 200) }; } function _(el, f, t) { c(el.$1); el.className = f > t ? '' : 'on'; return el.$1 = setInterval(function () { el.style.height = (f += Math[f > t ? 'floor' : 'ceil']((t - f) * .3)) + 'px'; if (f == t) c(el.$1) }, 10), _ } }; new SlideView("idSlideView3"); </script></body></html>
[解决办法]
用简单的CSS，加上精确的JS灵活赋值，都不难实现