HTML5圣诞节装饰的AVL树（自平衡二叉查找树）

AVL SVG Ornaments Christmas Tree

html5, 算法，二分检索

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1355
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {
    function TreeWalker(objCounter) {
        if (TreeWalker.prototype.Interval) {
            window.clearInterval(TreeWalker.prototype.Interval);
        }
        var item = 0;
        TreeWalker.prototype.Interval = window.setInterval(function() {
            if ($(".paused").is(":visible")) {
                return;
            }
            $(".Ornament.highlight").removeClass("highlight");
            var $Ornament = $("#ornament-" + ((item++) % objCounter.items));
            var $Ornaments = $Ornament.closest(".Ornaments");
            if (!$Ornaments.length) {
                window.clearInterval(TreeWalker.prototype.Interval);
                return;
            }
            $Ornament.addClass("highlight");
            $Ornaments.css("margin-left", "0px");
            $Ornaments.css("margin-left", -Math.max(0, ($Ornament.position().left - $Ornaments.position().left - $Ornaments.closest(".Holder").width() + ($Ornament.width() + 6))) + "px")
        }, TreeWalker.prototype.Speed);
    }
    TreeWalker.prototype.Interval;
    TreeWalker.prototype.Speed = 100;
    var AVLTreeOptions = {
        duplicates: false,
        keepeach: true
    }
    var Tree = new AVLTree(AVLTreeOptions);

function ScrollTo(el, func) {
        $('html, body').stop().animate({
            scrollTop: $(el).offset().top - ($(".dvControlsWrapper").height() + 10)
        }, 500, func);
    }

$(".tree").html(objCounter.MakeTree({}));
        TreeWalker(objCounter);
    });
    //		$("body").append($("#About").clone().removeAttr("id").addClass("About"));
    $(".Text").trigger("click");
});

编译

CSS

body {
    margin-top: 90px;
}
.col-sm-4 {
    float: right;
    width: 25%;
}
.dvBackground {
    position: fixed;
    top: 0px;
    right: 0px;
    padding-top: 100px;
    height: 100vh;
    width: 40vw;
    z-index: 3;
    opacity: .4;
    font-size: .6vw;
}
.dvBackground:hover {
    overflow: auto;
    opacity: 1;
    font-size: 12pt;
}
.dvBackground .dvTitle {
    font-size: 3vw;
    text-align: center;
    right: 40px;
}
.dvBackground #About {
    max-width: 60vw;
    padding-bottom: 10vh;
}
.dvControlsWrapper {
    position: fixed;
    top: 0px;
    left: 0px;
    min-height: 80px;
    width: 100vw;
    background-color: white;
    padding: .3vw 0 0 0;
    box-shadow: 1px 0px 2px #343434;
    z-index: 2;
}
.dvControls {
    width: 99%;
    margin-left: .3%;
    padding: .2%;
    min-height: 40px;
    outline: 1px solid lightgrey;
}
.dvControls .next,
.dvControls #selFound {
    display: none;
}
.dvControls.found .next,
.dvControls.found #selFound {
    display: initial;
}
.TreeBody {} .tree {
    flex-direction: column;
    position: relative;
    padding: 2px;
    z-index: 1;
    opacity: 1;
}
.Level {
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    overflow: auto;
    justify-content: center;
    padding: 0px;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.Holder {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 1px;
    overflow: hidden;
    margin: -1px 0px;
    border-radius: 37px;
}
.Level .Left,
.Level .Right {
    display: none;
    position: absolute;
    color: white;
    background: black;
    opacity: .2;
    top: 0px;
    height: 30px;
    width: 30px;
    z-index: 10;
    padding: 2px;
    font-size: 1.4em;
    cursor: pointer
}
.Level .Left {
    left: 5px;
}
.Level .Right {
    right: 5px;
}
.Level:hover .Left,
.Level:hover .Right {
    opacity: 1;
}
.Ornaments {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    background-color: transparent;
    background-image: url("//www.usgolfers.com/images/branches.jpg");
    background-size: 45px;
    padding: 4px 0px;
}
#expand {
    display: none;
}
.expanded .Level {
    height: 60px;
}
.expanded .Holder {
    height: 100%;
    width: 100%;
}
.expanded .Ornaments {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.Ornament {
    opacity: 1;
    border: 1px solid black;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    margin: 0px 3px;
    overflow: hidden;
    text-align: center;
    background-color: #ffffff;
    background-size: cover;
}
.expanded .Ornament {
    width: 50px;
    height: 50px;
    position: absolute;
}
.expanded .Ornaments:hover .Ornament {} .Ornament.highlight {
    border-color: white;
    box-shadow: 0px 0px 5px white;
    transition: border-color 100ms ease-in;
}
.Ornament {
    transition: 2000ms;
}
.paused {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: pink;
    outline: 1px solid black;
}
.TreeContainer {
    position: relative;
    width: 60vw;
}
.TreeContainer:hover .paused {
    display: initial;
}
body:not(.expanded) .Level:hover {
    margin-bottom: -12px;
}
body:not(.expanded) .Level:hover .Holder {
    overflow: auto;
    min-width: 70px;
    height: 130px;
    max-width: 100%!important;
    width: auto!important;
}
body:not(.expanded) .Level:hover .Ornament {
    width: 50px;
    padding: 0px;
    min-width: 50px;
    height: 50px;
    text-align: center;
    zoom: 2;
}

HTML

AVL SVG Ornaments Christmas Tree

html5, 算法，二分检索

编辑器支持Emmet

快捷键

AVL SVG Ornaments Christmas Tree

html5, 算法，二分检索

HTML5 Web音频应用程序接口（Web Audio API）实例：参数均衡器

HTML5/CSS3/SVG实现的液体掉落（滑落）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：