Blog Garden beautify blog essay directory


Blog Garden beautify blog essay directory

Be based onAloof and proud wolfstay2014-5-11Improvement based on directory code

One.Js code

var BlogDirectory = {
        Get the location of the element, the distance from the left border of the browser (left) and the distance from the top border of the browser (top)
    getElementPosition:function (ele) {        
        var topPosition = 0;
        var leftPosition = 0;
        while (ele){              
            topPosition += ele.offsetTop;
            leftPosition += ele.offsetLeft;        
            ele = ele.offsetParent;     
        return {top:topPosition, left:leftPosition}; 

    Get the current position of scroll bar
    getScrollBarPosition:function () {
        var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
        return  scrollBarPosition;
    Move the scroll bar, finalpos as the destination, and internal as the moving speed
    moveScrollBar:function(finalpos, interval) {

        //Exit if this method is not supported
        if(!window.scrollTo) {
            return false;

        //Disable mouse wheel when form scrolls
        window.onmousewheel = function(){
            return false;
        //Clear timing
        if (document.body.movement) { 

        var currentpos =BlogDirectory.getScrollBarPosition();//Get the current position of scroll bar

        var dist = 0; 
        If (currentpos = = finalpos) {// after reaching the preset position, release the mouse wheel and exit
            window.onmousewheel = function(){
                return true;
            return true; 
        If (currentpos < finalpos) {// not reached, calculate the distance to be moved in the next step
            dist = Math.ceil((finalpos - currentpos)/10); 
            currentpos += dist; 
        if (currentpos > finalpos) { 
            dist = Math.ceil((currentpos - finalpos)/10); 
            currentpos -= dist; 
        var scrTop = BlogDirectory.getScrollBarPosition();//Get the current position of scroll bar
        Window.scrollto (0, currentpos); // move window
        If (blogdirectory. Getscrollbarposition() = = scrtop) // if it has reached the bottom, release the mouse wheel and exit
            window.onmousewheel = function(){
                return true;
            return true;
        //Move to next step
        var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 
        document.body.movement = setTimeout(repeat, interval); 
    htmlDecode:function (text){
        var temp = document.createElement("div");
        temp.innerHTML = text;
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;

    Create a blog directory,
    ID represents the ID of the div container containing the body of the blog,
    MT and St represent the label names of the main title and the secondary Title respectively (such as H2, H3, upper case or lower case can be used!) ,
    Interval indicates the speed of movement
    createBlogDirectory:function (id, mt, st, interval){
         //Get blog body div container
        var elem = document.getElementById(id);
        if(!elem) return false;
        //Get all element nodes in div
        var nodes = elem.getElementsByTagName("*");
        //Create div container for blog directory
        var divSideBar = document.createElement('DIV');
        divSideBar.className = 'uprightsideBar';
        divSideBar.setAttribute('id', 'uprightsideBar');
        var divSideBarTab = document.createElement('DIV');
        divSideBarTab.setAttribute('id', 'sideBarTab');
        var h2 = document.createElement('H2');
        Var TXT = document.createtextnode ('directory navigation ');
        var divSideBarContents = document.createElement('DIV'); = 'none';
        divSideBarContents.setAttribute('id', 'sideBarContents');
        //Create a custom list
        var dlist = document.createElement("dl");
        Var num = 0; // count MT and St found
        MT = mt.touppercase(); // convert to uppercase
        St = st.touppercase(); // convert to uppercase
        //Traverse all element nodes
        for(var i=0; i<nodes.length; i++)
            if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)    
                //Get title text
                Var nodetext = nodes [i]. InnerHTML. Replace (/ < \ /? [^ >] + > / g, "); // the contents of innerHTML may have HTML tags, so use regular expressions to remove HTML tags
                Nodetext = nodetext. Replace (// Ig, "); // replace all 
                nodetext = BlogDirectory.htmlDecode(nodetext);
                // insert anchor        
                nodes[i].setAttribute("id", "blogTitle" + num);
                var item;
                    Case MT: // if it is the main title 
                        item = document.createElement("dt");
                    Case st: // if it is a subtitle
                        item = document.createElement("dd");
                //Create anchor link
                var itemtext = document.createTextNode(nodetext);
                item.setAttribute("name", num);
                Item. Onclick = function() {// add a mouse click trigger function
                    var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
                    if(!BlogDirectory.moveScrollBar(, interval)) return false;
                //Add custom table items to the custom list
        if(num == 0) return false; 
        /*Event handling when mouse enters*/
        divSideBarTab.onmouseenter = function(){
   = 'block';
        /*Event handling when mouse leaves*/
        divSideBar.onmouseleave = function() {
   = 'none';

   Console. Log ('generate directory after page loading ')

2、 CSS code

/*Generate CSS for blog directory*/
/*Customize a CSS3 animation*/
@keyframes pulse {
    25% {
        transform: scale(1.05);

    75% {
        transform: scale(.95);
/*Adjust the position of the directory box*/
#uprightsideBar {
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    position: fixed;  
    top: 50px;
    right: 0px;
    width: auto;
    height: auto;

#sideBar {
    float: left;
    padding: 0 0 0 65px;

#sideBarTab {
    float: left;
    width: 40px;
    height: 200px;
    border: 1px solid #e5e5e5;
    border-right: none;
    text-align: center;
    background-image: url(;
    color: #79a3e5;

/*Internal content format after expansion*/
#sideBarContents {
    float: left;
    overflow: auto;
    overflow-x: hidden;
    min-width: 0px;
    max-width: 500px;
    min-height: 200px;
    max-height: 1200px;
    border: 1px solid #e5e5e5;
    border-right: none;
    background: #fff;
    background-size: 100% 100%;
    color: #79a3e5;

#sideBarContents dl {
    margin: 0;
    padding: 0;

#sideBarContents dt {
    margin-top: 5px;
    margin-left: 5px;

/*Css3hover animation*/
#sideBarContents dd:hover, dt:hover {
     animation-name: pulse;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    box-shadow: none;
    color: #A7995A;

#sideBarContents dd {
    margin-left: 20px;

3、 Display effect

Not open

Blog Garden beautify blog essay directory

Deployment effect

Blog Garden beautify blog essay directory

Hover effect

Blog Garden beautify blog essay directory

3、 Bugs solved on the original basis

1. The directory cannot be loaded due to other JS (the most important modified content)

2. Changed the style

3. Changed hover style to make him look better

Recommended Today

What are the new methods of visual + map technology?

Last week, Ren Xiaofeng, chief scientist of Alibaba Gaode map, made a technical exchange with you on the development of computer vision related technology and the application in the field of map travel at the online live broadcast activity of “cloud dialogue” between senior students of Alibaba. The interaction between live broadcast is hot. Especially […]