概念证明

Question

我想使用div（#button）循环浏览四种不同的状态，并在点击时更改特定的CSS属性;使用Javascript或jQuery是有意义的。

默认状态是白色背景，其下面列出了特定的CSS属性。接下来的3个州使用HTML5视频作为背景，CSS属性都需要切换到#fff。因此页面默认启动，当单击按钮div时，它将是：vid1，vid2，vid3，返回默认值，vid1，vid2，vid3，默认等等。将CSS设置为默认的＃000和视频的#fff。

视频背景的HTML;需要使用vid2，vid3等更新mp4和webm版本的源链接。

<video playsinline autoplay muted loop id="bgvid">
    <source src="videos/vid1.webm" type="video/webm">
    <source src="videos/vid1.mp4" type="video/mp4">
</video>

在具有视频背景的3个州中，以下CSS属性是我想要更改的内容。

h1 {color: #000;}
p {color: #000;}
h1 a {color: #000;}
#button:active {background-color: #000;}
#nav-icon span {background: #000;}

Answer 1

我首先创建一个很好的数组，包含每个步骤的CSS类和视频源列表。

接下来，我会根据Array中的数据根据需要创建video个标签。您可以在开头为每个步骤创建视频标记，为每个步骤显示和隐藏适当的标记。

点击按钮后，您还可以创建一个video标记并删除上一个标记。

对于每个步骤，您都可以拥有一个CSS类，您可以在单击按钮后将其应用于某些父元素（例如body）。这样你就可以整齐地将样式与实际的JavaScript分开。

概念证明

$(function(){
  var steps = [
    {
      cssClass: 'default'
    },
    {
      cssClass: 'video',
      sources: [
        ['videos/vid1.webm', 'video/webm'],
        ['videos/vid1.mp4', 'video/mp4']
      ]
    },
    {
      cssClass: 'step3',
      sources: [
        ['videos/vid2.webm', 'video/webm'],
        ['videos/vid2.mp4', 'video/mp4']
      ]
    }
  ];
  
  $('button').click(function(){
    if (steps.length == 0) {
      return;
    }
    
    var prevStepIndex = parseInt($(this).data('step') || 0);
    var currentStepIndex = prevStepIndex + 1;
    if (currentStepIndex >= steps.length) {
      currentStepIndex = 0;
    }
    var currentStep = steps[currentStepIndex];
    
    $('body').attr('class', currentStep.cssClass || '');
    
    $(this).data({'step': currentStepIndex});
    $('#step').text(currentStepIndex);
  });
});

.default h1,
.default h1 a,
.default p {
  color: #000;
}

.default #button:active,
.default #nav-icon span {
  background: #000;
}

.video h1,
.video h1 a,
.video p {
  color: #fff;
}

.video #button:active,
.video #nav-icon span {
  background: #fff;
}

.step3 h1,
.step3 h1 a,
.step3 p {
  color: red;
}

.step3 #button:active,
.step3 #nav-icon span {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Test header</h1>
<button>Change!</button>
Current step: <span id="step"/>

使用Javascript循环浏览视频背景并更改CSS

1 个答案:

概念证明