当前位置: 代码迷 >> Web开发 >> ?怎么做成这样的网页?
  详细解决方案

?怎么做成这样的网页?

热度:136   发布时间:2012-04-11 17:42:33.0
?如何做成这样的网页? - Web 开发 / 其他
?如何做成这样的网页?
就是鼠标放在标题上就可以翻页的(不是Flash)  
例如:  
http://www.xunlei.com/第二个横广告条上面的精华资源那个效果  
谢谢!

------解决方案--------------------

<span onmouseover= "showdiv1() " style= "cursor:hand " > 显示层1 </span>
<span onmouseover= "showdiv2() " style= "cursor:hand " > 显示层2 </span>
<div style= "display:block " id= "div1 ">
<table cellpadding= "5 " cellspacing= "0 " border=1 bordercolor= "fff000 ">
<tr>
<td>
这是层1
</td>
</tr>
</table>
</div>

<div style= "display:none " id= "div2 " border=1>
<table cellpadding= "5 " cellspacing= "0 " border=1 bordercolor= "000fff ">
<tr>
<td >
这是层2
</td>
</tr>
</table>
</div>
<script language= "javascript ">
function showdiv1() {
Div1 = document.getElementById( "div1 ");
Div2 = document.getElementById( "div2 ");
Div1.style.display = "block ";
Div2.style.display = "none ";
}

function showdiv2() {
Div1 = document.getElementById( "div1 ");
Div2 = document.getElementById( "div2 ");
Div2.style.display = "block ";
Div1.style.display = "none ";
}
</script>


如果使用图片或其它的页面元素作为切换标签,也一样,加上需要的onmouseover onmouseout onmousedown事件就可以,如:

<img src= "xxx1.gif " onmouseover= "this.src='xxx1.gif';showdiv1() " onmouseout= "this.src='xxx2.gif' " border= "0 " style= "cursor:hand " >
  相关解决方案