zoukankan      html  css  js  c++  java
  • JS滑动门,JQuery滑动门

       <a href="#" id="one1" onmouseover="setTab('one',1,2)" class="hover">专家汇聚</a>
       <a href="#"  id="one2" onmouseover="setTab('one',2,2)" >主治医师</a>
    
     <div id="con_one_1" >
     <a href="#"  target="_blank" class="sub2_more">更多</a>
    <div class="sub2_con1">
                        
         00
     
    </div>
    </div>
     <div id="con_one_2"   style="display:none">
     <a href="#"  target="_blank" class="sub2_more">更多</a>
    <div class="sub2_con1">
         555
     
    </div>
    
     </div>
    //tab切换
    function setTab(name, cursel, n) {
        for (i = 1; i <= n; i++) {
            var menu = document.getElementById(name + i);
            var con = document.getElementById("con_" + name + "_" + i);
            menu.className = i == cursel ? "hover" : "";
            con.style.display = i == cursel ? "block" : "none";
    
        }
    }
    .sub2_more
    {
        display:block; 
        float:right;    
        text-align:center; 
        position:relative;
        color:#00968b;
        margin-top:-48px;
        text-decoration:none;
        font-size:12px;
        margin-right:20px;
     } 
    
    .sub2_more:hover{color:#00c1b3}

    解释:setTab('one',1,2) 与IDcon_one_2相关联,参数中的2表示总的滑动门总数

    ---------------------------------------------------------------------------------

    结构:注意ID

    <div class="FZ_Tab_Title txt_C">
    <a href=""   class="hover">仿真恐龙</a><a href="">仿真骨架</a><a href="">互动娱乐</a><a href="">机械怪兽</a>
    </div>
    <div class="Marquee"  >
      <div  class="Marquee_1" id="Marquee_1">
            <ul id="Marquee_1_ul">
                <li> <a href="" target="_blank"><img src="../images/03.jpg"  width=286px height=215/><span>恐龙霸王龙11</span></a></li>
                <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙11</span></a></li>
              <li> <a href="" target="_blank"><img src="../images/03.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
              <li> <a href="" target="_blank"><img src="../images/03.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
            
            </ul>
        </div>
     
      <div  class="Marquee_2" id="Marquee_2">
            <ul id="Marquee_2_ul">
             <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙22</span></a></li>
              <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙22</span></a></li>
              <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
             <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
            </ul>
        </div>
     
      <div  class="Marquee_3" id="Marquee_3">
            <ul id="Marquee_3_ul">
            <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙33</span></a></li>
              <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙33</span></a></li>
              <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
             <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
            </ul>
        </div>
    
      <div  class="Marquee_4" id="Marquee_4">
            <ul id="Marquee_4_ul">
                   <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙44</span></a></li>
              <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙44</span></a></li>
              <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
             <li> <a href="" target="_blank"><img src="../images/04.jpg"  width=286px height=215/><span>恐龙霸王龙</span></a></li>
            
            </ul>
        </div>
     </div>
    <script>
    //切换的关键代码
    $(".FZ_Tab_Title a").eq(0).addClass("hover"); $(".Marquee div").eq(0).show(); $(".FZ_Tab_Title a").hover(function () { $(this).addClass("hover").siblings("a").removeClass("hover"); $(".Marquee div:eq(" + $(this).index() + ")").show().siblings("div").hide(); });
      new Marquee(["Marquee_1", "Marquee_1_ul"], 2, 2, "100%", 396, 50, -1, 0);//无缝滚动
        new Marquee(["Marquee_2", "Marquee_2_ul"], 2, 2, "100%", 396, 50, -1, 0);//无缝滚动
        new Marquee(["Marquee_3", "Marquee_3_ul"], 2, 2, "100%", 396, 50, -1, 0);//无缝滚动
        new Marquee(["Marquee_4", "Marquee_4_ul"], 2, 2, "100%", 396, 50, -1, 0);//无缝滚动
    /*样式代码用于滚动,不用于切换*/
    .Marquee
    {padding-top:60px;height:250px;overflow:hidden} .Marquee ul li ,.Marquee ul li div{ float:left;line-height:25px;overflow:hidden} .Marquee ul li { float:left;line-height:25px;height:250px; width:300px; overflow:hidden} .Marquee ul li a img{ width:286px; height:215px; display:inline-block} .Marquee ul li a span{ display:inline-block;text-align:center;width:286px;color:#fff} .Marquee ul li a:hover span{color:#da000f} .Marquee ul li a:hover img{border:1px solid #5b2900}
  • 相关阅读:
    155. 最小栈
    160. 相交链表
    PAT 1057 Stack
    PAT 1026 Table Tennis
    PAT 1017 Queueing at Bank
    PAT 1014 Waiting in Line
    PAT 1029 Median
    PAT 1016 Phone Bills
    PAT 1010 Radix
    PAT 1122 Hamiltonian Cycle
  • 原文地址:https://www.cnblogs.com/qigege/p/4990107.html
Copyright © 2011-2022 走看看