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

博客加入导航

时间:2017-12-02 13:00:57      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:uppercase   技术   post   height   click   rip   fixed   div   local   

效果不是很好,写的比较潦草,不过勉强自己使用^_^

代码如下

在设置中页脚html中加入<script>标签,把下面代码复制进去

var $cnblogsPostBody = $("#post_body");
        if ($cnblogsPostBody.length > 0) {
            var wHeight = $(window).height(); //获取浏览器窗口宽度
            var wWidth = $(window).width(); //获取浏览器窗口高度#598fa9
            var $divNavigationBtn = $("<div style=‘position:fixed;left:"+(wWidth-24)+"px;top:150px;width:20px;height:100px;background-color:#598fa9;border-radius:5px;font-weight:bold;‘>导航</div>");
            var $divNavigation = $("<div style=‘position:fixed;left:"+(wWidth-24*2-150)+"px;top:100px;width:170px;height:500px;background-color:#eee;border-radius:5px;font-weight:bold;overflow:scroll;‘></div>");
            $divNavigation.hide();
            $divNavigationBtn.click(function(){
                if($divNavigation.is(":hidden")){
                    $divNavigation.show();    //如果元素为隐藏,则将它显现
                }else{
                    $divNavigation.hide();     //如果元素为显现,则将其隐藏
                }
            });
            $.each($cnblogsPostBody.children(), function (i, target) {
                if (target.tagName.toLocaleUpperCase().indexOf("H") != -1) {
                    var $target = $(target);
                    var $goH = $target.clone();
                    var link = $.param($target.text());

                    var $a = $("<a></a>");
                    $a.html($target.html());
                    $a.prop("name", link);
                    $target.html($a);
                    
                    var $goa = $("<a></a>");
                    $goa.html($goH.html());
                    $goa.prop("href","#"+link);
                    $goH.html($goa);

                    $divNavigation.append($goH);
                }
            });
            
            $("body").append($divNavigationBtn);
            $("body").append($divNavigation);
        }

技术分享图片

 

博客加入导航

标签:uppercase   技术   post   height   click   rip   fixed   div   local   

原文地址:http://www.cnblogs.com/xzcode/p/7953751.html

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