有没有人有红孩子网站那样的图片翻转代码

有没有人有红孩子网站那样的图片翻转代码
www.redbaby.com.cn

解决方案 »

  1.   

    什么叫图片翻转，
    你是指那个tab的效果吗？
      

  2.   

    你可以查看页面的源码，应该能扣出来http://www.lanrentuku.com/lanren/jscode/
    这个网站里也有类似的效果！但都是FLASH的，你自己看看去吧
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD>
     <style type="text/css">
    *{font-size:12px;}
    ul{margin:0px; padding:0px;}

    .tabPannel{width:300px; border:1px solid #666666; float:left;}
    .tabPannel .tabContainer{width:300px;float:left; border-bottom:1px solid #666666;}
    .tabPannel .tabContainer li{list-style-type:none; width:50px; height:30px; line-height:30px; border-right:1px solid #666666; text-align:center; float:left;}
    .tabPannel .tabContainer .mouseover{background-color:#809CE1;}
    .tabPannel .tabContainer .mouseout{background-color:#118FE9;}
    .tabPannel .tabContentContainer{width:290px; height:200px;  float:left;}
    </style>
    <script type="text/javascript">
    /// <summary>
    /// 构造函数需要传入一个数组，其中存储了需要包装的系了元素ID
    /// </summary>
    var TabPannel = function(tabIdArray)
    {
    this.tabArray = new Array();

    for(var i = 0; i < tabIdArray.length; i++)
    {
    this.tabArray[i] = document.getElementById(tabIdArrary[i]);
    if(!this.tabArray[i])
    {
    alert("ID为" + tabIdArray[i] + "的元素不存在");
    return;
    }
    }

    var tabPannel = this;
    for(var i = 0; i < tabPannel.tabArray.length; i++)
    {
    tabPannel.tabArray[i].onmouseover = function(event)
    {
    var srcElement;
    if(window.event)
    {
    srcElement = window.event.srcElement;
    }
    else
    {
    srcElement = event.target;
    }

    var tabContent;
    for(var i = 0; i < tabPannel.tabArray.length; i++)
    {
    tabContent = document.getElementById(tabPannel.tabArray[i].attributes.getNamedItem("tabContentId").nodeValue);
    if(srcElement.id != tabPannel.tabArray[i].id)
    {
    tabContent.style.display = "none";
    }
    else
    {
    tabContent.style.display = "block";
    }
    } srcElement.className = srcElement.attributes.getNamedItem("CssClassMouseover").nodeValue;
    }

    tabPannel.tabArray[i].onmouseout = function(event)
    {
    var srcElement;
    if(window.event)
    {
    srcElement = window.event.srcElement;
    }
    else
    {
    srcElement = event.target;
    }
    srcElement.className = srcElement.attributes.getNamedItem("CssClassMouseout").nodeValue;
    }
    }
    };
    </script>
     <body>
    <div  class="tabPannel">
    <div class="tabContainer">
    <ul>
    <li id="tab1" tabContentId="tabContent1" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">体育</li>
    <li id="tab2" tabContentId="tabContent2" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">手机</li>
    <li id="tab3" tabContentId="tabContent3" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">财经</li>
    <li id="tab4" tabContentId="tabContent4" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">足球</li>
    </ul>
    </div>
    <div id="tabContent1" class="tabContentContainer" style="display:block;">
    <br/>
    &nbsp;体育
    </div>
    <div id="tabContent2" class="tabContentContainer" style="display:none">
    <br>
    &nbsp;手机
    </div>
    <div id="tabContent3" class="tabContentContainer" style="display:none">
    <br>
    &nbsp;财经
    </div>
    <div id="tabContent4" class="tabContentContainer" style="display:none">
    <br>
    &nbsp;足球
    </div>
    </div>
    <script>
    var tabIdArrary = new Array("tab1", "tab2", "tab3", "tab4");
    TabPannel(tabIdArrary);
    </script>
    </body>
    </HTML>