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}
  • 相关阅读:
    三元表达式 列表和字典推导式 函数对象 名称空间 作用域 global和nonlocal 函数装饰器 枚举对象
    函数参数 打散机制 字符串比较 返回值
    函数简介
    三种字符串的介绍 文件的读写
    字符编码
    数据类型及其常用方法 数据类型转换 可变与不可变 值拷贝与深浅拷贝
    流程控制 while和for循环
    变量命名规范 常量 输入和输出 注释 数据类型 运算符 逻辑运算符
    语言分类 编译型和解释型语言分析 环境变量 代码执行的方式 pip介绍 变量
    Python django tests
  • 原文地址:https://www.cnblogs.com/qigege/p/4990107.html
Copyright © 2011-2022 走看看