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欢迎您来访本博客。此博客是作者在工作中的一个记事本,方便下次遇到同样问题时,以最快的速度解决掉遇到的问题。如果您发现哪里写的不对,欢迎给我留言,让我们一起进步。不胜感激!
  • 相关阅读:
    【转】 UI自动化测试的关注点
    使用MapReduce将HDFS数据导入到HBase(一)
    Hadoop2.4.1 MapReduce通过Map端shuffle(Combiner)完成数据去重
    Hadoop2.4.1 使用MapReduce简单的数据清洗
    Hadoop2.4.1 64-Bit QJM HA and YARN HA + Zookeeper-3.4.6 + Hbase-0.98.8-hadoop2-bin HA Install
    hadoop2.2.0 MapReduce求和并排序
    hadoop2.2.0 MapReduce分区
    hadoop2.2.0伪分布模式64位安装
    hadoop2.2.0 MapReduce的序列化
    MyEclipse8.6下的svn插件安装
  • 原文地址:https://www.cnblogs.com/haley168/p/menuScroll.html
Copyright © 2011-2022 走看看