码迷,mamicode.com
首页 > 其他好文 > 详细

大燕网北京站右侧辅助导航

时间:2016-07-20 21:06:10      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:

今天北京下了一天的大雨,中午吃完饭,人事将我们叫到办公室,说是要开会。大家都特别紧张,还以为是最近有出什么错了呢。原来是两件事: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>

 

大燕网北京站右侧辅助导航

标签:

原文地址:http://www.cnblogs.com/haley168/p/menuScroll.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!