Difference between revisions of "Team:NAU-CHINA/Model"

Line 4: Line 4:
  
  
−
<!DOCTYPE HTML>
+
<html>
−
<html style="padding-bottom: 54px;">
+
<head lang="en">
−
<head>
+
    <meta charset="UTF-8">
−
<meta charset="utf-8">
+
    <title>仿百度百科右侧导航代码jquery插件/</title>
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
    <style>
−
<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
        html,body,h3{ margin: 0; padding: 0;}
−
<meta name="renderer" content="webkit">
+
        h2,h3{ height: 500px; margin-bottom: 10px; border: #ddd solid 1px;}
−
<title>仿百度侧边栏插件</title>
+
        li{ list-style: none; margin: 0; vertical-align: top;}
−
<meta name="description" content="jQuery仿百度百科侧边栏滑动插件" />
+
        ul{ margin: 0; padding: 0;}
−
<meta name="keywords" content="仿百度侧边栏插件，仿百度侧边栏插件，侧边栏，jQuery仿百度百科侧边栏滑动插件，jquery,jquery插件" />
+
−
<link rel="Shortcut icon" href="http://www.jq22.com/favicon.ico" />
+
−
<link href="css/demo.css?v3" rel="stylesheet" media="all" />
+
−
<!--[if IE]>
+
−
+
−
<style type="text/css">
+
−
li.purchase a {
+
−
padding-top: 5px;
+
−
background-position: 0px -4px;
+
−
}
+
−
+
−
li.remove_frame a {
+
−
padding-top: 5px;
+
−
background-position: 0px -3px;
+
−
}
+
−
</style>
+
−
+
−
<![endif]-->
+
−
<style>
+
−
        .fdad a {
+
−
            color: #000;
+
−
            display: inline-block;
+
−
            overflow: hidden;
+
−
            text-overflow: ellipsis;
+
−
            white-space: nowrap;
+
−
        }
+
  
−
         .fdad {
+
        /*这是百科右侧导航代码的样式表*/
−
            top: 66px;
+
         .directory-nav{position: fixed; right:50px; bottom:40px; padding: 12px 0 20px 32px; display: none;}
 +
        .directory-nav li{height: 34px;line-height: 34px;  position: relative;}
 +
        .directory-nav li a{}
 +
        .directory-nav .l1{ }
 +
        .directory-nav .l2{ text-indent:0.6em;}
 +
        .directory-nav .l1 a{font-size: 16px;}
 +
        .directory-nav .l2 a{font-size: 14px;}
 +
        .directory-nav,.directory-nav a{ color: #666;}
 +
        .directory-nav .cur a{ color: red;}
 +
 
 +
        .directory-nav .line{ position: absolute; left:4px; top: 5px; bottom: 5px; z-index: 1; width: 2px; background: #ddd;}
 +
        .directory-nav .c-top,.directory-nav .c-bottom{ position: absolute; left: 0; z-index: 2;
 +
            display: block; width: 10px; height: 10px; font-size: 0; line-height: 0;
 +
            background: url(images/directory-nav.png) no-repeat 0 -69px;
 
         }
 
         }
−
 
+
         .directory-nav .c-dot{
−
         .xgcj li {
+
             position: absolute; left:-32px; top: 50%; z-index: 2; margin-top: -5px;
−
             font-size: 14px;
+
             display: block; width: 10px; height: 10px; font-size: 0; line-height: 0;
−
            line-height: 20px;
+
             background: url(images/directory-nav.png) no-repeat -275px 0;
−
            list-style-type: none;
+
−
             transition: all 1s ease 0s;
+
−
             border-radius: 5px;
+
 
         }
 
         }
  
−
            .xgcj li:hover {
+
        .directory-nav .c-top{ top: 0}
−
                background-color: #e4e4e4;
+
        .directory-nav .c-bottom{ bottom: 0}
−
            }
+
         .directory-nav .cur-tag{
−
 
+
             position: absolute; left: -1px; top:30px; z-index: 5; margin-top: -6px;
−
         .xgcj {
+
            display: block; width: 19px; height: 13px; font-size: 0; line-height: 0;
−
             background-color: rgba(255,255,255,.3);
+
            background: url(images/directory-nav.png) no-repeat -271px -37px;
−
             overflow-x: hidden;
+
             -webkit-transition:top .3s ease 0s;
 +
            transition:top .3s ease 0s;
 
         }
 
         }
  
−
            .xgcj ul {
+
    </style>
−
                padding: 10px
+
</head>
−
            }
+
<body style="padding: 40px;">
  
−
            .xgcj h3 {
+
<div style=" padding-bottom:20px;line-height: 2;">
−
                line-height: 30px;
+
<h1>向下滚动，观察右下角 仿百度百科右侧导航代码jquery插件</h1>
−
            }
+
<h2>标题一</h2>
 +
    <h3>标题一-1</h3>
 +
    <h3>标题一-2</h3>
 +
    <h3>标题一-3</h3>
 +
<h2>标题二</h2>
 +
    <h3>标题一-1</h3>
 +
    <h3>标题一-2</h3>
 +
    <h3>标题一-3</h3>
 +
<h2>标题三</h2>
 +
<h2>标题四</h2>
 +
<h2>标题五</h2>
 +
<h2>标题六</h2>
  
−
            .xgcj p {
+
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
−
                padding-left: 20px;
+
<script>
−
                font-size: 13px;
+
    /*
−
                display: none;
+
    * 懒人建站 http://www.51xuediannao.com/
−
             }
+
    * 仿百度百科右侧导航代码 - 页面目录结构导航 v0.01
 +
    * 只写了两级，无限级别也可以，是逻辑上的级别，html结构全是同一级别
 +
    * 滑标动画用的css3过渡动画，不支持的浏览器就没动画效果了
 +
    * 和百度百科比起来还是比较弱，没有实现右边也可以滚动的功能
 +
    */
 +
    function DirectoryNav($h,config){
 +
        this.opts = $.extend(true,{
 +
            scrollThreshold:0.5,    //滚动检测阀值 0.5在浏览器窗口中间部位
 +
            scrollSpeed:700,        //滚动到指定位置的动画时间
 +
             scrollTopBorder:500,    //滚动条距离顶部多少的时候显示导航，如果为0，则一直显示
 +
            easing: 'swing',        //不解释
 +
            delayDetection:200,    //延时检测，避免滚动的时候检测过于频繁
 +
            scrollChange:function(){}
 +
        },config);
 +
        this.$win = $(window);
 +
        this.$h = $h;
 +
        this.$pageNavList = "";
 +
        this.$pageNavListLis ="";
 +
        this.$curTag = "";
 +
        this.$pageNavListLiH = "";
 +
        this.offArr = [];
 +
        this.curIndex = 0;
 +
        this.scrollIng = false;
 +
        this.init();
 +
    }
  
−
             .xgcj span {
+
    DirectoryNav.prototype = {
−
                 font-family: "宋体";
+
        init:function(){
−
            }
+
             this.make();
 +
            this.setArr();
 +
            this.bindEvent();
 +
        },
 +
        make:function(){
 +
            //生成导航目录结构,这是根据需求自己生成的。如果你直接在页面中输出一个结构那也挺好不用 搞js
 +
            $("body").append('<div class="directory-nav" id="directoryNav"><ul></ul><span class="cur-tag"></span><span class="c-top"></span><span class="c-bottom"></span><span class="line"></span></div>>');
 +
            var $hs = this.$h,
 +
                $directoryNav = $("#directoryNav"),
 +
                temp = [],
 +
                index1 = 0,
 +
                index2 = 0;
 +
            $hs.each(function(index){
 +
                 var $this = $(this),
 +
                        text = $this.text();
 +
                if(this.tagName.toLowerCase()=='h2'){
 +
                    index1++;
 +
                    if(index1%2==0) index2 = 0;
 +
                    temp.push('<li class="l1"><span class="c-dot"></span>'+index1+'. <a class="l1-text">'+text+'</a></li>');
 +
                }else{
 +
                    index2++;
 +
                    temp.push('<li class="l2">'+index1+'.'+index2+' <a class="l2-text">'+text+'</a></li>');
  
−
            .xgcj li:hover p {
+
                 }
−
                 display: block;
+
             });
−
             }
+
            $directoryNav.find("ul").html(temp.join(""));
−
    </style>
+
−
<script type="text/javascript">
+
−
        var txt = "http://www.jq22.com/demo/baiduNav201712121046";
+
−
        window.g1 = txt.substr(0, 3);
+
−
        window.g2 = txt.substr(0, 19);
+
−
    </script>
+
−
<script src="js/pace.min.js" charset="gbk"></script>
+
−
<link href="css/pace-theme-barber-shop.css" rel="stylesheet" />
+
−
<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
+
−
<script src="js/jquery.qrcode.min.js"></script>
+
−
<script type="text/javascript">
+
  
−
        var theme_list_open = false;
+
            //设置变量
 +
            this.$pageNavList = $directoryNav;
 +
            this.$pageNavListLis = this.$pageNavList.find("li");
 +
            this.$curTag = this.$pageNavList.find(".cur-tag");
 +
            this.$pageNavListLiH = this.$pageNavListLis.eq(0).height();
  
−
        $(document).ready(function () {
+
            if(!this.opts.scrollTopBorder){
−
            function fixHeight() {
+
                 this.$pageNavList.show();
−
                 var headerHeight = $("#switcher").height();
+
−
                $("#iframe").attr("height", $(window).height() - 54 + "px");
+
 
             }
 
             }
−
            $(window).resize(function () {
+
        },
−
                fixHeight();
+
        setArr:function(){
−
             }).resize();
+
             var This = this;
−
 
+
             this.$h.each(function(){
−
             $('.icon-monitor').addClass('active');
+
                 var $this = $(this),
−
 
+
                    offT = Math.round($this.offset().top);
−
            $(".icon-mobile-3").click(function () {
+
                 This.offArr.push(offT);
−
                 $("#by").css("overflow-y", "auto");
+
−
                $('#iframe-wrap').removeClass().addClass('mobile-width-3');
+
−
                 $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
+
−
                $(this).addClass('active');
+
−
                return false;
+
 
             });
 
             });
−
 
+
        },
−
             $(".icon-mobile-2").click(function () {
+
        posTag:function(top){
−
                 $("#by").css("overflow-y", "auto");
+
             this.$curTag.css({top:top+'px'});
−
                $('#iframe-wrap').removeClass().addClass('mobile-width-2');
+
        },
−
                 $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
+
        ifPos:function(st){
−
                $(this).addClass('active');
+
            var offArr = this.offArr;
−
                return false;
+
            //console.log(st);
 +
            var windowHeight = Math.round(this.$win.height() * this.opts.scrollThreshold);
 +
            for(var i=0;i<offArr.length;i++){
 +
                 if((offArr[i] - windowHeight) < st) {
 +
                    var $curLi = this.$pageNavListLis.eq(i),
 +
                        tagTop = $curLi.position().top;
 +
                    $curLi.addClass("cur").siblings("li").removeClass("cur");
 +
                    this.curIndex = i;
 +
                    this.posTag(tagTop+this.$pageNavListLiH*0.5);
 +
                    //this.curIndex = this.$pageNavListLis.filter(".cur").index();
 +
                    this.opts.scrollChange.call(this);
 +
                 }
 +
            }
 +
        },
 +
        bindEvent:function(){
 +
            var This = this,
 +
                show = false,
 +
                timer = 0;
 +
            this.$win.on("scroll",function(){
 +
                var $this = $(this);
 +
                clearTimeout(timer);
 +
                timer = setTimeout(function(){
 +
                    This.scrollIng = true;
 +
                    if($this.scrollTop()>This.opts.scrollTopBorder){
 +
                        if(!This.$pageNavListLiH) This.$pageNavListLiH = This.$pageNavListLis.eq(0).height();
 +
                        if(!show){
 +
                            This.$pageNavList.fadeIn();
 +
                            show = true;
 +
                        }
 +
                        This.ifPos( $(this).scrollTop() );
 +
                    }else{
 +
                        if(show){
 +
                            This.$pageNavList.fadeOut();
 +
                            show = false;
 +
                        }
 +
                    }
 +
                },This.opts.delayDetection);
 
             });
 
             });
  
−
             $(".icon-mobile-1").click(function () {
+
             this.$pageNavList.on("click","li",function(){
−
                 $("#by").css("overflow-y", "auto");
+
                 var $this = $(this),
−
                 $('#iframe-wrap').removeClass().addClass('mobile-width');
+
                    index = $this.index();
−
                $('.icon-tablet,.icon-mobile,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
+
                 This.scrollTo(This.offArr[index]);
−
                 $(this).addClass('active');
+
            })
−
                return false;
+
        },
 +
        scrollTo: function(offset,callback) {
 +
            var This = this;
 +
            $('html,body').animate({
 +
                scrollTop: offset
 +
            }, this.opts.scrollSpeed, this.opts.easing, function(){
 +
                This.scrollIng = false;
 +
                 //修正弹两次回调 蛋疼
 +
                callback && this.tagName.toLowerCase()=='body' && callback();
 
             });
 
             });
 +
        }
 +
    };
  
−
            $(".icon-tablet").click(function () {
+
    //实例化
−
                $("#by").css("overflow-y", "auto");
+
    var directoryNav = new DirectoryNav($("h2,h3"),{
−
                $('#iframe-wrap').removeClass().addClass('tablet-width');
+
        scrollTopBorder:0  //滚动条距离顶部多少的时候显示导航，如果为0，则一直显示
−
                $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
+
    });
−
                $(this).addClass('active');
+
−
                return false;
+
−
            });
+
  
−
            $(".icon-monitor").click(function () {
+
</script>
−
                $("#by").css("overflow-y", "hidden");
+
−
                $('#iframe-wrap').removeClass().addClass('full-width');
+
−
                $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
+
−
                $(this).addClass('active');
+
−
                return false;
+
−
            });
+
−
        });
+
−
    </script>
+
−
<script type="text/javascript">
+
−
        function Responsive($a) {
+
−
            if ($a == true) $("#Device").css("opacity", "100");
+
−
            if ($a == false) $("#Device").css("opacity", "0");
+
−
            $('#iframe-wrap').removeClass().addClass('full-width');
+
−
            $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
+
−
            $(this).addClass('active');
+
−
            return false;
+
−
        };
+
−
    </script>
+
−
</head>
+
−
<body id="by" style="overflow-y: hidden">
+
−
<div id="switcher">
+
−
<div class="center">
+
−
<ul>
+
−
<li class="logoTop" id="sj2"><a href="http://www.jq22.com/jquery-info17323">仿百度侧边栏插件</a></li>
+
−
<div id="Device">
+
−
<li class="device-monitor"><a href="javascript:">
+
−
<div class="icon-monitor">
+
−
</div>
+
−
</a></li>
+
−
<li class="device-mobile"><a href="javascript:">
+
−
<div class="icon-tablet">
+
−
</div>
+
−
</a></li>
+
−
<li class="device-mobile"><a href="javascript:">
+
−
<div class="icon-mobile-1">
+
−
</div>
+
−
</a></li>
+
−
<li class="device-mobile-2"><a href="javascript:">
+
−
<div class="icon-mobile-2">
+
−
</div>
+
−
</a></li>
+
−
<li class="device-mobile-3"><a href="javascript:">
+
−
<div class="icon-mobile-3">
+
−
</div>
+
−
</a></li>
+
−
</div>
+
−
<li class="top2" id="sj"><a href="#">手机二维码预览</a><div class="vm">
+
−
<div id="output"></div>
+
−
<p style="color: #808080">扫一扫，直接在手机上打开</p>
+
−
</div>
+
−
</li>
+
−
<script>
+
−
                    jQuery('#output').qrcode({ width: 150, height: 150, text: window.location.href });
+
−
                </script>
+
−
<li class="remove_frame" style="display:n"><a href="http://www.jq22.com/demo/baiduNav201712121046" title="移除框架"></a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
<div id="iframe-wrap">
+
−
<iframe id="iframe" src="http://www.jq22.com/demo/baiduNav201712121046" frameborder="0" width="100%"></iframe>
+
−
</div>
+
−
<div class="fdad">
+
−
<div class="fdl">Advertisement</div>
+
−
<div class="fdr">x</div>
+
−
<div class="fdadnr">
+
−
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+
−
 
+
−
<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-2935286260943234" data-ad-slot="6063645905"></ins>
+
−
<script>
+
−
                    (adsbygoogle = window.adsbygoogle || []).push({});
+
−
            </script>
+
−
<div class="xgcj">
+
−
<ul>
+
−
<div style="width:100%">
+
−
<div style="float:left"><h3>相关插件</h3></div>
+
−
<div style="clear: left;"></div>
+
−
</div>
+
−
<li>
+
−
<a href="http://www.jq22.com/jquery-info4080"><span>&gt;</span> 最强大的手机侧栏</a>
+
−
<p>html5 css3手机侧栏侧栏,完美兼容移动端开发</p>
+
−
</li>
+
−
<li>
+
−
<a href="http://www.jq22.com/jquery-info1408"><span>&gt;</span> jquery下拉菜单导航</a>
+
−
<p>jquery hover事件下拉菜单导航仿京东商城商品分类导航样式布局，通过鼠标滑过商品分类导航展示商品分类子菜单内容的效果</p>
+
−
</li>
+
−
<li>
+
−
<a href="http://www.jq22.com/jquery-info1750"><span>&gt;</span> jquery弹性竖导航网页菜单</a>
+
−
<p>此代码内容为jquery弹性竖导航网页菜单，属于站长常用代码，非常漂亮！</p>
+
−
</li>
+
−
<li>
+
−
<a href="http://www.jq22.com/jquery-info12121"><span>&gt;</span> css3结合jQuery侧边导航酷炫展开效果</a>
+
−
<p>鼠标移入侧边栏，二级菜单3D展开 鼠标hover背景变色，鼠标移入二维码图片背景变色</p>
+
−
</li>
+
−
<li>
+
−
<a href="http://www.jq22.com/jquery-info18264"><span>&gt;</span> 手风琴菜单css3原生jsrem适配左侧竖排导航</a>
+
−
<p>样式和效果还可以的使用的rem适配兼容ie</p>
+
−
</li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
<script type="text/javascript">
+
−
                $(document).ready(function () {
+
−
                    $(".fdr").click(function () {
+
−
                        $(".fdad").hide();
+
−
                    });
+
−
                });
+
−
    </script>
+
−
<script>
+
−
        var _hmt = _hmt || [];
+
−
        (function () {
+
−
            var hm = document.createElement("script");
+
−
            hm.src = "//hm.baidu.com/hm.js?b3a3fc356d0af38b811a0ef8d50716b8";
+
−
            var s = document.getElementsByTagName("script")[0];
+
−
            s.parentNode.insertBefore(hm, s);
+
−
        })();
+
−
    </script>
+
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 20:51, 11 October 2018

Template:2018_NAU-CHINA

header


仿百度百科右侧导航代码jquery插件/

向下滚动，观察右下角 仿百度百科右侧导航代码jquery插件

标题一

标题一-1

标题一-2

标题一-3

标题二

标题一-1

标题一-2

标题一-3

标题三

标题四

标题五

标题六