代码简洁的滑动门代码

发表于2012-08-24 10:37:32来源于创想网页设计工作室

次点击[大] [中] [小] [打印] [关闭窗口] [评论]

今天给客户做网站时，在网上找到一个代码很简洁的滑动门代码，觉得很不错，发出来给大家参考一下。代码如下：

    <div class="Products_info">
     <div class="js_title">
      <span id="title_0" onmouseover="CatalogClick(0);"><strong>Specification</strong></span>
      <span id="title_1" onmouseover="CatalogClick(1);"><strong>Function</strong></span>
     </div><div class="clear"></div>
     <div id="content_0" style="border:1px solid #d1dee8; padding:10px;" >
      <span class="description">Product Description</span>
      <div><span style="font-size:18px;"><strong><span style="background-color:#ffff00;">New launched MK802+ (1GB DDR3),100pcs stock for selling now~</span></strong></span></div>
     </div>
     <div id="content_1" style="border:1px solid #d1dee8; padding:10px; display:none">54545454</div>
    </div>
   </div>

在最后加上JS代码：

<script language="javascript">
function CatalogClick(id)
{
  for (i=0; i<=3; i++)
  {
    var obj = eval("content_"+i)
    var about = eval("title_"+i)
    if (i == id )
    {
 about.style.color = "#ff0000";
 obj.style.display = "";
    }else{
// if ((id < 3 && i <4)||(id > 3 && i >3))
  //     {   
    obj.style.display = "none"; 
    about.style.color = "#1574b5";
  //  }  
    } 
  }
}
</script>

相关热词搜索：代码简洁滑动门代码JS特效

上一篇：弹出式网页代码展示代码

下一篇：招行官网漂亮JS焦点图分享