zoukankan      html  css  js  c++  java
  • 左侧楼层导航

    <!---------------左侧楼层--------------->
    <div class="FloorsDiv" style="display: block;">
    <div class="smwrap" style="display:inline-block">
        <span class="floor">1F</span>    
        <span class="hide"><a href="#FloorDiv01">搜索通</a></span>
        <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">
    </div>
        <div style="clear: both;"></div>
    <div class="smwrap" style="display:inline-block">
        <span class="floor">2F</span>
        <span class="hide"><a href="#FloorDiv02">微信通</a></span>
        <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">
        </div>
        <div style="clear: both;"></div>
    <div class="smwrap" style="display:inline-block">
        <span  class="floor">3F</span>
        <span class="hide"><a href="#FloorDiv03">建站通</a></span>
        <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">
        </div>
        <div style="clear: both;"></div>
    <div class="smwrap" style="display:inline-block">
        <span  class="floor">4F</span>
        <span class="hide"><a href="#FloorDiv04">网店通</a></span>
        <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">
        </div>
        <div style="clear: both;"></div>
    <div class="smwrap" style="display:inline-block">
        <span  class="floor">5F</span>
        <span class="hide"><a href="#FloorDiv05">外贸通</a></span>
        <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">
        </div>
        <div style="clear: both;"></div>
    <div class="smwrap" style="display:inline-block">
        <span  class="floor">6F</span>
        <span class="hide"><a href="#FloorDiv06">设计通</a></span>
        <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">
        </div>
        <div style="clear: both;"></div>
    <div class="smwrap" style="display:inline-block">
       <span  class="floor">7F</span>
        <span class="hide"><a href="#FloorDiv07">企业通</a></span>
        <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">
        </div>
        <div style="clear: both;"></div>
    <div class="smwrap" style="display:inline-block">
         <span  class="floor">8F</span>
        <span class="hide"><a href="#FloorDiv08">法务通</a></span>
        <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">
        </div>
        <div style="clear: both;"></div>
    <div class="smwrap" style="display:inline-block">
         <span  class="floor">9F</span>
        <span class="hide"><a href="#FloorDiv09">知产通</a></span>
        <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">
        </div>
        <div style="clear: both;"></div>
    <div class="smwrap" style="display:inline-block">
         <span  class="floor">10F</span>
        <span class="hide"><a href="#FloorDiv10">财税通</a></span>
        <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">
        </div>
        <div style="clear: both;"></div>
    <div class="smwrap" style="display:inline-block">
         <span  class="floor">11F</span>
        <span class="hide"><a href="#FloorDiv11">社保通</a></span>
        <img src="/Content/images/NewIndexImg/FloorsLine.jpg" height="1" width="47" style="float: left;">
        </div>
        <div style="clear: both;"></div>
    </div>

    js

    <script>
        $('.smwrap').mouseover(function () {
            //alert('a');
            $(this).children('.floor').css("display", "none");
            $(this).children('.floor').next(".hide").css({
                "display": "block",
                "background": "#3b9cdf",
                });
                 $(".hide a").css({
                "display": "block",
                "color": "#fff",
                });
        })
        $('.smwrap').mouseout(function () {
            //alert('a');
            $(this).children('.floor').css("display", "block");
            $(this).children('.floor').next(".hide").css({
                "display": "none",
                "background": "#fff",
                "color": "#333"
            });

        })
         $(window).scroll(function () {
                     if ($(document).scrollTop() >= $(window).height()) {
                         $(".FloorsDiv").fadeIn(1000);
                     } else {
                         $(".FloorsDiv").fadeOut(1000);

                     }
                 });

    </script>

    css

    /*-------------------楼层---------------*/
     .FloorsDiv {
    47px;
    height:auto;
    display: inline-block;
    position: fixed;
    z-index: 99998;
    left:100px;
    bottom: 50px;
    text-align:center;
    background:#fff;
    color:#a9a9a9;
    }
     .FloorsDiv span{
         47px;
         height:25px;
         line-height:25px;
         float:left;
         font-size:14px;
         text-align:center;
         }
     .FloorsDiv span a{
         font-size:12px;
         color:#a9a9a9;}
        
    .hide{display:none;}
    #FloorDiv01,#FloorDiv02,#FloorDiv03,#FloorDiv04,#FloorDiv05,#FloorDiv06,#FloorDiv07,#FloorDiv08,#FloorDiv09,#FloorDiv10,#FloorDiv11
    {
        display:inline-block;
        }

  • 相关阅读:
    在老王指导下第一次完成购物车!!!
    自己封装的getElementByClassName函数,解决部分浏览器不兼容的问题
    第一次用js实现window10日历----动态的哟!
    第一次完成注册页面!分享一下,哈哈哈!
    array和string的方法
    js关于函数全局变量和局部变量的区分
    CSS3的3D效果样式transform属性中的rotate3d
    css中的 权重
    margin padding 和边框线的使用
    图片bug
  • 原文地址:https://www.cnblogs.com/zhouyx/p/5508070.html
Copyright © 2011-2022 走看看