Question

我在本地测试粒子滑块，它工作正常，直到我将<!DOCTYPE html>添加到文件中，滑块图像有点循环而没有进入最后阶段，并且它下面的内容开始移动以锯齿状的速度下降。

这是我从http://cssdeck.com/labs/interactive-particle-logo复制的代码（为我的测试更改了图像）

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>particle slider test</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  </head>
  <body style="margin: 0;">
  <div id="particle-slider">
        <div class="slides">

              <div id="first-slide" class="slide" data-src="
              data:image/jpeg;base64,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
              ">

              </div>
            </div>
             <canvas class="draw" width="600" height="500"></canvas>
  </div>
  <div>
  some content
  </div>
      <script class="cssdeck">// Tamino Martinius - All rights reserved

        // Copyright © 2013 Tamino Martinius (http://zaku.eu)
        // Copyright © 2013 Particleslider.com (http://particleslider.com
        // Terms of usage: http://particleslider.com/legal/license
$(document).ready(function () {
        var init = function(){
          var isMobile = navigator.userAgent &&
            navigator.userAgent.toLowerCase().indexOf('mobile') >= 0;
          var isSmall = window.innerWidth < 600;

          var ps = new ParticleSlider({
            ptlGap: isMobile || isSmall ? 1 : 0,
            ptlSize: isMobile || isSmall ? 1 : 1,
            width: 1e9,
            height: 1e9
          });

          (window.addEventListener
           ? window.addEventListener('click', function(){ps.init(true)}, false)
           : window.onclick = function(){ps.init(true)});
        }

        var initParticleSlider = function(){
          var psScript = document.createElement('script');
          (psScript.addEventListener
            ? psScript.addEventListener('load', init, false)
            : psScript.onload = init);
          psScript.src = 'js/particle-slider.js';
          psScript.setAttribute('type', 'text/javascript');
          document.body.appendChild(psScript);
        }

        (window.addEventListener
          ? window.addEventListener('load', initParticleSlider, false)
          : window.onload = initParticleSlider);

});
      </script>

  </body>
</html>

粒子滑块和doctype冲突

0 个答案: