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次出现

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

1 个答案: