左侧楼层导航

<!---------------左侧楼层--------------->
<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 {
width: 47px;
height:auto;
display: inline-block;
position: fixed;
z-index: 99998;
left:100px;
bottom: 50px;
text-align:center;
background:#fff;
color:#a9a9a9;
}
 .FloorsDiv span{
     width: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;
    }