zoukankan      html  css  js  c++  java
  • 大燕网北京站右侧辅助导航

    今天北京下了一天的大雨,中午吃完饭,人事将我们叫到办公室,说是要开会。大家都特别紧张,还以为是最近有出什么错了呢。原来是两件事:1、发上个项目的奖金。2、宣布今天下雨早点回家(会后就可以)。

    回到家没事做,看腾讯新闻,把大燕网的右侧导航趴下了玩玩。

    废话不多说,已经不少了,直接贴代码。

    <!DOCTYPE html>
    <head>
        <title>辅助导航_腾讯·大燕网北京站</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <script type="text/javascript" src="http://mat1.gtimg.com/sd/new_index/js/jquery.min.v1.7.2.js"></script>
        <style>
            #rtt,#rtt .gotop,#rtt .er{ background-image:url(http://mat1.gtimg.com/tj/images/rbg.png); background-repeat:no-repeat;}
            #rtt { width:103px; /*height:514px;*/ position:fixed; right:50px; bottom:30px;  z-index:1000; padding-top:46px; display:block;}
            #rtt .r_list{ clear:both; overflow:hidden; display:none;}
            #rtt .r_list a{ height:30px; display:block;margin-top:2px; text-align:center; font:normal 16px/30px '微软雅黑'; color:#fff; background:#bbb;}
            #rtt .r_list a:hover{ background:#2f8bd6; }
            #rtt .gotop{ height:48px; display:none; background-position:-103px 0; margin-top:2px; cursor:pointer; background-color:#bbb; }
            #rtt .er{background-position:-103px -48px;  padding:98px 0 0 8px; height:70px; color:#fff; background-color:#b40700; line-height:20px;}
        </style>
        </head>
    <body>
    <h1 style="position: fixed;right:0;">大燕网北京站右侧辅助导航</h1>
    <div style="height:4000px;"></div>
    <div id="rtt" class="rtt" style="z-index: 99;">
        <div class="r_list" id="r_list" style="display: none;">
            <a href="javascript:void(0)" data-name="gm">游戏</a>
            <a href="javascript:void(0)" data-name="acts">活动</a>
            <a href="javascript:void(0)" data-name="fc">房产</a>
            <a href="javascript:void(0)" data-name="fc">家居</a>
            <a href="javascript:void(0)" data-name="qc">汽车</a>
            <a href="javascript:void(0)" data-name="yl">社区</a>
            <a href="javascript:void(0)" data-name="cj">财经</a>
            <a href="javascript:void(0)" data-name="ly">旅游</a>
            <a href="javascript:void(0)" data-name="ms">美食</a>
            <a href="javascript:void(0)" data-name="ss">时尚</a>
            <a href="javascript:void(0)" data-name="jy">教育</a>
            <a href="javascript:void(0)" data-name="jk">健康</a>
            <!-- <a href="javascript:void(0)" data-name='yl'>娱乐</a> -->
            <a href="javascript:void(0)" data-name="tp">图片</a>
        </div>
        <div class="gotop" id="gotop" style="display: none;"></div>
        <div class="er" id="er">
            扫一扫,找燕小萌陪你聊人生。
        </div>
        <script>
            var _dataTop=[];
            $('.r_go_now').each(function(index, element) {
                _dataTop[$(this).data('go')]=$(this).offset().top;
    
            });
            $('#r_list a').click(function(e) {
                var name = $(this).data('name');
                $('html,body').stop().animate({scrollTop: _dataTop[name]+'px'}, 800);
    
            });
        </script>
    </div>
    <script type="text/javascript">
        function myEvent(obj,ev,fn){
            if(obj.attachEvent){
                obj.attachEvent('on'+ev,fn);
            }else{
                obj.addEventListener(ev,fn,false);
            }
        }
        myEvent(window,'load',function(){
            var oRTT=document.getElementById('rtt');
            var pH=400;//document.documentElement.clientHeight;
            var htmlHeight =  document.documentElement.scrollHeight;
            var timer=null;
            var scrollTop;
            window.onscroll=function(){
                scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
                //var mHeight = Math.floor(pH / 2);
                var ie6 = !window.XMLHttpRequest;
                if (ie6) {
                    oRTT.style.position = "absolute";
                    //oRTT.style.bottom = scrollTop + mHeight + 'px';
                    oRTT.className =oRTT.className;
                }
                if(scrollTop>=pH){
                    $('#r_list').slideDown();
                    $('#gotop').fadeIn();
                }else{
                    $('#r_list').slideUp();
                    $('#gotop').hide();
                }
                return scrollTop;
            };
    
            $('#gotop').click(function(e) {
                $('html,body').animate({scrollTop: "0"}, 800);
            });
        });
    </script>
    </body></html>
    haley欢迎您来访本博客。此博客是作者在工作中的一个记事本,方便下次遇到同样问题时,以最快的速度解决掉遇到的问题。如果您发现哪里写的不对,欢迎给我留言,让我们一起进步。不胜感激!
  • 相关阅读:
    Java 泛型 泛型的约束与局限性
    Java 泛型 泛型方法
    Java 泛型 泛型数组
    Java 泛型 协变性、逆变性
    Java 泛型 协变式覆盖和泛型重载
    Java 泛型 泛型代码和虚拟机
    Insertion Sort List
    Remove Duplicates from Sorted List II
    String to Integer (atoi)
    SpringMvc源码入门
  • 原文地址:https://www.cnblogs.com/haley168/p/menuScroll.html
Copyright © 2011-2022 走看看