Parade Series - SVG Resource

原创已于 2024-04-04 11:18:05 修改 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#python #html5 #svg

于 2024-03-29 09:05:44 首次发布

本文介绍了如何在网页中使用Iconfont图标库，配合Bootstrap进行导航栏切换和SVG动画加载，以及如何实现复选框组的交互。展示了HTML代码片段和JavaScript函数，展示了前端开发中常见的组件集成和用户交互设计。

iconfont

https://www.iconfont.cn/?spm=a313x.search_index.i3.2.74e53a819tkkcG

在这里插入图片描述

音符

<div class="form-group">
    <a href="Javascript:reload();" class="btn btn-icon btn-outline-light btn-block" style=";">
        <svg t="1711672934523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9319" width="48" height="48"><path d="M829.151246 347.629337C812.381643 161.350775 550.866483 9.517883 539.988903 3.172628a22.661626 22.661626 0 0 0-33.992439 19.488998V770.495272a172.228355 172.228355 0 0 0-106.50964-33.539206 230.695349 230.695349 0 0 0-66.625179 9.971115 213.019281 213.019281 0 0 0-109.229036 73.8769 124.638941 124.638941 0 0 0-24.474556 111.94843 143.674707 143.674707 0 0 0 146.847334 90.646503 230.242116 230.242116 0 0 0 66.62518-9.971116 213.019281 213.019281 0 0 0 109.229035-72.970434 128.264801 128.264801 0 0 0 27.193951-94.272363 22.661626 22.661626 0 0 0 0-8.158185V63.905784C620.211058 110.135501 772.043949 226.616256 783.827995 351.255197a199.422306 199.422306 0 0 1-90.646503 169.962193 22.661626 22.661626 0 0 0 28.553648 35.352136A241.572929 241.572929 0 0 0 829.151246 347.629337zM486.054234 913.716746a168.149262 168.149262 0 0 1-86.114178 56.654064 185.82533 185.82533 0 0 1-53.481436 8.158185 100.617618 100.617618 0 0 1-103.790245-58.466994 81.12862 81.12862 0 0 1 17.222835-72.06397 168.149262 168.149262 0 0 1 86.114177-56.654064 187.185028 187.185028 0 0 1 53.481437-8.158185 100.617618 100.617618 0 0 1 103.790245 58.466994 81.12862 81.12862 0 0 1-17.222835 72.06397z" fill="#bfbfbf" p-id="9320"></path></svg>
    </a>
    <p class="text-center text-md-center">音符</p>
</div>

音乐模式

<div class="form-group">
    <a href="Javascript:reload();" class="btn btn-icon btn-outline-light btn-block" style=";">
        <svg t="1711672962343" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9621" width="48" height="48"><path d="M955.552014 347.679504C940.593183 161.374059 679.493581 9.519256 668.161133 3.173085a22.664896 22.664896 0 0 0-33.997344 19.491811V770.606463a172.253209 172.253209 0 0 0-106.525011-33.544046 230.275343 230.275343 0 0 0-66.634794 9.972554c-95.645861 28.557769-155.934484 111.964586-133.722886 185.398849a144.148738 144.148738 0 0 0 146.868526 90.659584 230.728641 230.728641 0 0 0 66.634794-9.972554 213.050022 213.050022 0 0 0 109.244798-72.980965 128.283311 128.283311 0 0 0 27.197876-94.285967 22.664896 22.664896 0 0 0 0-8.159363V63.915007C747.488269 110.151394 900.249668 226.64896 910.222222 351.305888a199.451085 199.451085 0 0 1-90.659584 169.986719 22.664896 22.664896 0 0 0 28.557769 35.357238 241.607791 241.607791 0 0 0 107.431607-208.970341z m-340.880035 566.169102a168.173528 168.173528 0 0 1-86.126605 56.66224 186.305445 186.305445 0 0 1-53.035857 8.159362 100.632138 100.632138 0 0 1-104.258521-58.475432c-14.958831-49.409473 31.730854-107.431607 103.351926-128.736609a187.212041 187.212041 0 0 1 53.489154-8.159362 100.632138 100.632138 0 0 1 103.805224 58.475431 81.140328 81.140328 0 0 1-17.225321 72.07437zM90.206286 249.313856h407.968127a22.664896 22.664896 0 0 0 0-45.329792h-407.968127a22.664896 22.664896 0 0 0 0 45.329792z" fill="#bfbfbf" p-id="9622"></path><path d="M90.206286 430.633023h407.968127a22.664896 22.664896 0 0 0 0-45.329791h-407.968127a22.664896 22.664896 0 0 0 0 45.329791zM520.839309 589.287295a22.664896 22.664896 0 0 0-22.664896-22.664896h-407.968127a22.664896 22.664896 0 0 0 0 45.329792h407.968127a22.664896 22.664896 0 0 0 22.664896-22.664896z" fill="#bfbfbf" p-id="9623"></path></svg>
    </a>
    <p class="text-center text-md-center">音乐模式</p>
</div>

bootstrap nav-tabs default page

var initTabs = function(currentPage = 1) {
    var tabs = $(".nav.nav-tabs li a");
    $(tabs).parent().click(function () {
        $($(this)).addClass("active").siblings().removeClass('active');
    });
    $(tabs.get(currentPage)).click();
};

bootstrap svg lading

    <div class="svg-wrapper">
        <svg class="svg-loading" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="circle" class="g-circles g-circles--v1">
              <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
              <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
              <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
              <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
              <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
              <circle id="7" cx="60" cy="110" r="10"></circle>
              <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
              <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
              <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
              <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
              <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
              <circle id="1" cx="60" cy="10" r="10"></circle>
            </g>

            <use xlink:href="#circle" class="use"/>
        </svg>
    </div>

Initialize

var initTabs = function(currentPage = 0) {
    var tabs = $('.nav.nav-tabs .nav-item');
    $(tabs.find('a').get(currentPage)).click();
};
var getTabsIndex = function() {
    return ($('.nav.nav-tabs .nav-item .nav-link.active').parent().index());
};
var initChecks = function() {
    var checkboxs = $(".checkbox-group");
    $(checkboxs).each(function (x, event) {
        $(this).find('.checkbox-item').each(function (y, event) {
            $(this).find('.checkbox-tile').on("click", function (event) {
                var datum = $(this).parent().parent().parent().attr('data-key');

                datum = parseInt(datum);
                console.log(x, datum, y);
                $(this).parent().parent().parent().find('input').prop('checked', false);
                processControl(datum + y);
            });
        });
    });
};
var setChecks = function(group = 0, item = 0) {
    var checkboxs = $(".checkbox-group");
    $(checkboxs[group]).find('.checkbox-tile')[item].click();
};
function init() {
    initTabs(0);
    initChecks(0);

    setChecks(0, 0);
    setChecks(1, 0);
}

$(function() {
    try {
        init();

        setInterval(function() {
            $('.svg-wrapper').addClass('hide');
            $('.nk-app-root').removeClass('hide');
        }, 1000);
    } catch(e) {
        console.log(e);
    }
});