juery-浮动栏目

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>回到顶部</title>
<style type="text/css">
body{ background-color:#bbac85;}
ul,li{ margin:0px; padding:0px; list-style:none;}
.navbox{ width:95px; height:auto;z-index:99; right:12px; bottom:5px;POSITION:fixed;_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop); font-family: "宋体";}
.mj_nav{ width:93px; height:auto; border:1px solid #806f5f; background-color:#f3f3f3; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; padding-bottom:15px;}
.mj_nav_bt{ width:93px; height:30px; background-color:#806f5f; font-size:14px; font-weight:bold; line-height:30px; text-align:center; color:#fde399; margin-bottom:10px;}
.mj_nav_list{ width:83px; height:auto; padding:0px 5px;}
.nav_span{ display:block; width:68px; padding-right:15px; height:24px; line-height:24px; background-repeat:no-repeat; background-position:5px 8px; color:#594d42; font-size:14px; cursor: pointer;}
.mj_sn{ background-position:5px -12px;}
.mj_nav_list ul{ width:68px; height:auto; padding:0px 0px 15px 15px; display:none;}
.mj_nav_list li{ width:68px; height:24px; line-height:24px; font-size:14px; overflow:hidden;}
.mj_nav_list li a{ color:#0a57b7; text-decoration: underline;}
.mj_nav_list li a:hover{ color: #FF6600;}
.guanbi,.gotop{ width:93px; height:30px; line-height:30px; border:1px solid #806f5f; background-color:#f3f3f3; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; text-align:center; font-size:14px; color:#594d42; margin-top:3px; cursor: pointer;}
.gotop{ display:none;}
.zhangkai{ width:20px; height:auto; padding:10px 5px; line-height:20px; font-size:14px; text-align:center;-webkit-border-radius:0px 5px 5px 0px;-moz-border-radius:0px 5px 5px 0px;border-radius:0px 5px 5px 0px; border:1px solid #806f5f; background-color:#f3f3f3; POSITION:fixed;_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop); z-index:100; right:0px; bottom:150px; display:none; cursor: pointer; color:#594d42;}
.xx{ height:1000px;}
</style>
<script type="text/javascript">
      $(document).ready(function(){
            $(".mj_nav_list span").click(function(){
                $(".mj_nav_list span").not($(this)).removeClass("mj_sn");
                $(this).toggleClass("mj_sn");
                $(".mj_nav_list ul").not($(this).next()).slideUp();
                $(this).next().slideToggle(500);
                //$(this).next().toggle();
            });
            $(window).scroll(function(){
               if ( $(window).scrollTop() > 50 ){
                                $(".gotop").fadeIn(800);
                        } else {
                                $(".gotop").fadeOut(500);
                        };
            });
            $(".gotop").click(function(){
                $(window).scrollTop(0);
            });
            $(".guanbi").click(function(){
                $(".navbox").hide();
                $(".zhangkai").show();
            });
            $(".zhangkai").click(function(){
                $(this).hide();
                $(".navbox").show(500);
            });
      });
    </script>
</head>
<body>
<div class="navbox">
<div class="mj_nav">
<div class="mj_nav_bt">网站导航</div>
<div class="mj_nav_list">
    <span class="nav_span">源码下载</span>
    <ul>
        <li><a href="/soft/1574.shtml" target="_blank">DELPHI通过URL触发实现协议注册</a></li><li><a href="/soft/17647.shtml" target="_blank">带加载的jQuery伸缩效果特效</a></li><li><a href="/soft/3847.shtml" target="_blank">PEDump Delphi版文件分析器</a></li><li><a href="/soft/2447.shtml" target="_blank">灰鸽子翻版 DarkMoon v4.11 For Delphi</a></li><li><a href="/soft/16129.shtml" target="_blank">vb 3d游戏实例,飞行战机射击</a></li><li><a href="/soft/18108.shtml" target="_blank">jQuery CookBook中文版教程 pdf</a></li><li><a href="/soft/1233.shtml" target="_blank">冰河2008远程控制Delphi完整版</a></li><li><a href="/soft/18373.shtml" target="_blank">C#做的窗体多文本框Demo实例</a></li><li><a href="/soft/15294.shtml" target="_blank">Jquery+JSON+ASP.NET实现WebService交互实例</a></li></ul>
</div>
<div class="mj_nav_list">
    <span class="nav_span">分类信息</span>
    <ul>
        <li><a href="/jscss/code/3604.shtml" target="_blank">网页计算器,仿Vista风格</a></li><li><a href="/jscss/code/3603.shtml" target="_blank">Js检测判断数字是否为两位数</a></li><li><a href="/jscss/code/3602.shtml" target="_blank">页面加载后累加,自加1,JS自动累加函数</a></li><li><a href="/jscss/code/3601.shtml" target="_blank">输入两个数字,比较它们的大小</a></li><li><a href="/jscss/code/3600.shtml" target="_blank">点击按钮,值自动加1</a></li><li><a href="/jscss/code/3599.shtml" target="_blank">Js使用parseInt解析数字,并求和</a></li><li><a href="/jscss/code/3598.shtml" target="_blank">用typeof查看数据类型</a></li><li><a href="/jscss/code/3597.shtml" target="_blank">复选框(checkbox)全选/全不选/反选代码</a></li><li><a href="/jscss/code/3596.shtml" target="_blank">播放列表文字显示/隐藏,点击展开</a></li>
    </ul>
</div>
<div class="mj_nav_list">
    <span class="nav_span">编程论坛</span>
    <ul>
        <li><a href="#" title="源码爱好者">源码爱好者</a></li>
        <li><a href="#" title="网页特效">网页特效</a></li>
        <li><a href="#" title="源码下载">源码下载</a></li>
        <li><a href="#" title="常用软件">常用软件</a></li>
    </ul>
</div>

</div>
    <div class="gotop">返回顶部</div>
    <div class="guanbi">点击关闭</div>
</div>
<div class="zhangkai">栏目导航</div>
<div class="xx"></div>
</body>
</html>

 

你可能感兴趣的:(滑动,浮动栏目)