Javascript 如何创建类似Vultr.com的用户界面演示

在中，他们有一个框架，其中有一个类似视频的用户界面演示

它实际上不是视频-文本是可选择的。

---

是否有用于此的特定库？

我打开控制台并键入

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);
  });