如何创建类似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);
  });

据我所见，select能力的wisdom是在该函数中定义的：(检查脚本的来源，甚至scripts)只有2次出现。