半点优化网 http://www.bdxc.net/
当前位置首页 > 网站技术问题> 正文

sony网站导航的源码怎么做啊?

FLASH的效果。用Javascript也可以实现。我这里有个HTML的。没有用JS<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ><html xmlns=><head><meta http-equiv=Content-Type content=text/html; charset=GB2312 /><title>无标题文档</title><style>body { background:#fff;}*{ margin:0; padding:0; font-size:12px;}dl { position:relative; margin:200px auto; border:1px #ccc solid; background:url() no-repeat 0px -1px;}dl,dd { width:258px; height:174px;}dd { overflow:hidden;}dt { position:absolute; top:1px; left:1px;}dt a { display:block; width:85px; height:31px; text-align:center; line-height:31px; color:#fff; text-decoration:none; font-weight:bold; float:left;}dt a:hover {background:url() no-repeat 1px 1px;}ul{ width:260px; height:170px; padding:31px 0 0; background:url() no-repeat 1px 1px;}li{width:160px;height:24px; line-height:24px; font:12px/27px 宋体,sans-serif;white-space:nowrap;overflow:hidden; margin:0 0 0 4px; list-style:none; border-bottom:1px #ccc dotted; text-indent:20px; background:url() no-repeat 2px center;}li a{ font-size:14px; text-decoration:none; color:#f60;}li a:hover { color:#09f;}#b{ background-position:86px 1px;}#c{ background-position:98% 1px;}</style></head><body><dl> <dt><a href=#a title=游戏新闻>游戏</a><a href=#b title=体育新闻>体育</a><a href=#c title=娱乐新闻>娱乐</a></dt> <dd> <ul id=a> <li><a href=# title=游戏新闻>游戏新闻</a></li> <li><a href=# title=游戏新闻>游戏新闻</a></li> <li><a href=# title=游戏新闻>游戏新闻</a></li> <li><a href=# title=游戏新闻>游戏新闻</a></li> <li><a href=# title=游戏新闻>游戏新闻</a></li> <li><a href=# title=游戏新闻>游戏新闻</a></li> <li><a href=# title=游戏新闻>游戏新闻</a></li> </ul> <ul id=b> <li><a href=# title=体育新闻>体育新闻</a></li> <li><a href=# title=体育新闻>体育新闻</a></li> <li><a href=# title=体育新闻>体育新闻</a></li> <li><a href=# title=体育新闻>体育新闻</a></li> <li><a href=# title=体育新闻>体育新闻</a></li> <li><a href=# title=体育新闻>体育新闻</a></li> <li><a href=# title=体育新闻>体育新闻</a></li> </ul> <ul id=c> <li><a href=# title=娱乐新闻>娱乐新闻</a></li> <li><a href=# title=娱乐新闻>娱乐新闻</a></li> <li><a href=# title=娱乐新闻>娱乐新闻</a></li> <li><a href=# title=娱乐新闻>娱乐新闻</a></li> <li><a href=# title=娱乐新闻>娱乐新闻</a></li> <li><a href=# title=娱乐新闻>娱乐新闻</a></li> <li><a href=# title=娱乐新闻>娱乐新闻</a></li> </ul> </dd></dl></body></html>JS+CSS<style type=text/css>#test1 { width: 300px; }/* 头部总体 css */.ntab2-head { clear:both; height: 21px; border-bottom: #c2130e 3px solid; text-align: center;}/* 头部标头的 css */.ntab2-head p { float:left; font-size: 14px; font-weight: bold; width: 80px; height: 21px;}/* 头部列表的 css */.ntab2-head li { float:left; background: #dcdcdc; border-left: #f2f2f2 1px solid; width: 42px; cursor: pointer; font-size: 14px; line-height: 21px; list-style-type: none;}.ntab2-head li.current { background: #c2130e; color: #ffffff; cursor: none;}/* 主体内容的 css? */.ntab2-body { text-align: left; }.ntab2-body dl { text-indent: 0px; margin: 0px; padding: 0px; }</style><script language=javascript>function ntab2_register(id, def){ var obj = document.getElementById(id); if (!obj || !obj.hasChildNodes()) { alert('ERROR: the object was not defined for #' + id + '#'); return; } // get head & body object var head = null; var body = null; for (var i = 0; i < obj.childNodes.length; i++) { var node = obj.childNodes[i]; if (node.tagName == 'DIV') { if (node.className == 'ntab2-head') head = node; else if (node.className == 'ntab2-body') body = node; } } if (!head) { alert('ERROR: head elements was not found for #' + id + '#'); return; } if (!body) { alert('ERROR: body elements was not found for #' + id + '#'); return; } // set action & default var items = head.getElementsByTagName('LI'); var datas = body.getElementsByTagName('DL'); if (items.length == 0) { alert('ERROR: empty set for head elements on #' + id + '#'); return; } if (items.length != datas.length) { alert('ERROR: not equal between body.length and head.length for #' + id + '#'); return; } var total = items.length; if (typeof def == 'undefined') def = 0; else def = parseInt(def)%total; if (def < 0) def += total; for (var i = 0; i < total; i++) { datas[i].style.display = (i == def ? '' : 'none'); items[i].className = (i == def ? 'current' : ''); items[i].onmouseover = function() { for (var k = 0; k < total; k++) { datas[k].style.display = (this == items[k] ? '' : 'none'); items[k].className = (this == items[k] ? 'current' : ''); } } }}</script><div id=test1> <!-- 头部设定 --> <div class=ntab2-head> <p>新闻排行<p></p> <li>国内</li> <li>国际</li> <li>社会</li> </div> <!-- 内容设定 --> <div class=ntab2-body> <dl> 国内-内容 </dl> <dl> 国际-内容 </dl> <dl> 社会-内容 </dl> </div></div><script language=javascript>ntab2_register('test1', 3);</script>

这个怎么可能是...假牙!~

猜你喜欢