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

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

大燕网北京站右侧辅助导航的相关文章

jQuery插件PageSlide实现左右侧栏导航

jQuery左右侧栏导航菜单插件PageSlide,目前比较流行的导航菜单展现形式,特别是在手机端或者触屏页面,效果还是不错的,支持自定义展现的方向,菜单内容可自行定义,支持加载页面,或者模态的窗格中显示此页的隐藏的内容,推荐使用. 使用方法: 1.加载插件和jQuery <link rel="stylesheet" type="text/css" href="../jquery.pageslide.css" /> <scrip

Google和百度都无法替代的10大深网搜索引擎

Google和百度都无法替代的10大深网搜索引擎 文章来自FREEBUF 3天前 1.2k浏览 数据库游戏开发 想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯GAD游戏开发行业精英群156225479 当我们想要搜索某些内容时,我们第一个想到的就是打开Google.百度或必应这类的搜索引擎.但针对有些内容,却是这些常规搜索引擎无法获取到的,那就是隐藏在深网的内容.据不完全统计,深网的信息量为表层网络的500倍.那么,深网主要都包含了些什么内容呢?其实,深网主要包括的都是些,例如需

键盘导航网:创意简洁导航网站,让你的键盘变网站导航

导航网站多如牛毛,想必大家常用的就那么几个 流氓hao123虽然流氓,但是普通人用着还是可以的 如果你是互联网发烧友,喜欢尝试各种新鲜的网站 那么你可以试试下面这款自定义导航网站 键盘导航网,用户自定义的导航网站 网站把键盘上的每一个键盘都设定为了一键访问 用户只需设置好按下每个键要去的网站就可以了 navi键盘导航网:点击进入 原文地址:https://www.cnblogs.com/girliswater/p/10251129.html

Asp.Net Web API 2 官网菜鸟学习系列导航[持续更新中]

前言 本来一直参见于微软官网进行学习的, 官网网址http://www.asp.net/web-api.出于自己想锻炼一下学习阅读英文文章的目的,又可以学习下微软新发布的技术,其实也很久了,但自己菜鸟一枚,对自己来说都是新技术了.鉴于以上两个原因,本人打算借助google翻译和有道词典,来翻译学习这个系列,并通过博客园来记录自己的翻译学习过程.由于自己阅读水平的确太菜,在借助工具的情况下,有时候搞出来的也是蹩脚的语句,自己读着都难受,尤其是到了Web API路由的那两篇,所以自己想着是不是有别人

各大著名公司移动端页面 - 导航的实现【学习点干货】

伴随着科技的发展,出现了各种型号的手机,导致了HTML5移动端开发人员对页面的实现要求更高了.目前来说,移动端的实现方法没有一个统一的标准,大家各自采用自己的实现方法,所以今天就给大家分享一下各大公司移动端页面的实现方法--导航栏 给大家分享之前,先说几句话.本文章主要给大家分享不同公司对移动端的实现采用了不同的方法.每一种方法各有各的好处,我们不能说哪一种方法好,哪一种方法不好.另外,这边主要分享基本原理,没有跟各大公司移动端页面的样式一摸一样,所以仅供大家参考学习,有什么不对的欢迎大家学习交

jQuery页面滚动右侧浮动导航切换

体验效果:http://hovertree.com/texiao/jquery/49/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"

2020十大暗网搜索引擎

什么是深网或暗网? Deep Web简单地指:  Internet或Internet上可用的内容,通常不被传统搜索引擎索引.有时也称为Dark Web.但是Dark Web是一本完全不同的章节.传统搜索引擎可能不喜欢索引此类内容的原因可能有很多. 深度网络搜索的另一件事是,它还意味着匿名浏览网络. 什么是深度网络搜索? 当我们在任何搜索引擎上搜索某项内容时,它只会显示由约10个链接组成的一些结果,并且我们发现至少有一个链接可以满足大多数情况下搜索到的术语.这就是所谓的简单搜索,或者我们可能会在网

IT大事件网-IT人的大事件http://www.itd4j.com,一个不错的IT网站,IT人必须关注啊!

IT大事件--IT人的事.itd4j.com,www.itd4j.com,分享IT界最新的IT大会--互联网大会,技术大会.了解最新技术动态资讯,学习最新.最热门的技术文章.可以关注:IT大会,IT互联网,架构师,网站,电商,移动,安全,大数据,云计算,开发者,开发,网络,开源,笔试,面试.挨踢人关IT事,技术人干技术事. IT大事件,itd4j.com,www.itd4j.com,IT大会,IT互联网,架构师,网站,电商,移动,安全,大数据,云计算,IT,开发,网络,开源,笔试,面试,程序员,

练习制作一个游戏官网主页(标题导航栏)

html <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="../CSS/神女控headfoot.css"/> <title>神女控官网</title></head><body><div