搜狐的滑动门效果代码

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

</style>
<script type="text/javascript">
//<![CDATA[
function getNextElement(obj) {
    var result = obj.nextSibling;
    while (!result.tagName) {
        result = result.nextSibling;
    }
    return result;
}
function tab(obj,index) {
    var index = index - 1;
    var tabobj = document.getElementById(obj);
    var tablist = tabobj.getElementsByTagName("LI");

    var boxobj = getNextElement(tabobj);
    var boxlist = boxobj.getElementsByTagName("DIV");

    for (var i=0; i<tablist.length; i++) {
        var cname,ds;
        if  (i == index) {
            cname =  "tabHover";
            ds = "block";
        } else {
            cname =  "tabNomorl";
            ds = "none";
        }
        boxlist[i].style.display = ds;
        tablist[i].className = cname;
        tablist[i].i = i;
        tablist[i].onclick = function() {
            tabclick(this.i);
        }

        function tabclick(j) {
            tablist[index].className = "tabNomorl";
            boxlist[index].style.display = "none";
            tablist[j].className = "tabHover";
            boxlist[j].style.display = "block";
            index = j;
        }
    }
}
window.onload = function() {
    new tab("tab1",2);
    new tab("tab2",3);
}
//]]>
</script>
</head>
<body>
<div style="margin:30px; height:auto;overflow:auto">
  <ul id="tab1" class="tab">
    <li>匹配度1</li>
    <li>匹配度2</li>
    <li>匹配度3</li>
    <li>匹配度4</li>
  </ul>
  <div class="box">
    <div>匹配度1</div>
    <div>匹配度2</div>
    <div>匹配度3</div>
    <div>匹配度4</div>
  </div>
</div>
<div style="padding:60px; height:900px">
  <ul id="tab2" class="tab">
    <li>匹配度1</li>
    <li>匹配度2</li>
    <li>匹配度3</li>
    <li>匹配度4</li>
  </ul>
  <div class="box">
    <div>匹配度1</div>
    <div>匹配度2</div>
    <div>匹配度3</div>
    <div>匹配度4</div>
  </div>
</div>
</body>
</html>

posted on 2008-01-21 14:26 我本无名阅读(1228) 评论(0) 编辑收藏举报