如何創建類似Vultr.com的用戶界面演示

Question

在https://www.vultr.com/中，他們有一個框架，其中包含一個類似於視頻的UI演示。

它實際上不是視頻 - 文本是可選的。

是否有一個特定的庫用於此？

Answer 1

我對他們的網站感到厭煩，我打開我的控制檯並輸入for (let script of document.scripts) console.log(script.src)以查看從外部來源運行的所有腳本。輸出是當你看到：

"https://www.google-analytics.com/analytics.js" 
"https://www.vultr.com/dist/js/jquery.min.js?v=250" 
"https://www.vultr.com/dist/js/core.min.js?v=250" 
"https://www.vultr.com/dist/js/main.js?v=250" 
"https://www.vultr.com/_js/global.js?v=250" 
"" 
"https://www.googleadservices.com/pagead/conversion.js" 

然後複製第四URL到另一個選項卡，並得到了文件內容，其開頭是如下：（我選擇它，因爲它不是精縮）

$(function() 
{ 
    'use strict'; 

    handleMainMenu(); 
    handleResponsiveSidebar(); 
    handleAccordionMenu(); 
    handleTooltips(); 
    handleFloatingLabels(); 
    handlePackageSwitcher(); 
    checkBoxes($('body')); 

    var animation_offset_px = 200; 
    if (typeof onGetAnimationOffsetPx === 'function') 
    { 
    animation_offset_px = onGetAnimationOffsetPx(); 
    } 
    handlePageAnimations(animation_offset_px); 

    if ($('body').hasClass('page-scrollspy')) 
    { 
    handleScrollSpySidebar(); 
    } 

    $('.reponsive-image-types > li > a').on('click', function(e) 
    { 
    e.preventDefault(); 
    var imageType = $(this).data('type'); 
    var imagePreview = $('.responsive-image .browser'); 
    imagePreview.removeClass('desktop-size tablet-size mobile-size').addClass(imageType); 
    $(this).closest('ul').find('li').removeClass('active'); 
    $(this).parent().addClass('active'); 
    imagePreview.find('.control-panel').removeClass('animated'); 
    setTimeout(function() 
     { 
     imagePreview.find('.control-panel').addClass('animated'); 
    }, 1000); 
    }); 

據我所知，選擇能力的wisdom是在該函數中定義的:(檢查該腳本的來源，即使是scripts）只有2次出現