2回答

• 

  x偏爱_南半球o

  2020-08-03 15:29:55

  insertRule 规则无法注入的 我是这样解决的：

  var style = document.styleSheets[0];

  style.insertRule(`@keyframes run {100%{transform:translateX(-${contentWidth}px);}} `)
  把这个删了，在marquee.css里面把动画帧加上就得了：
  @keyframes run {
      100%{
          transform:translateX(-2400px);
      }
  }

  
  

  0 0
• 

  慕粉3144500

  2020-01-30 00:42:23

  $(() => {
      console.log("页面加载完执行");
      var style = document.styleSheets[0];//获取页面加载样式表
      // 查找元素
      var $marquee = $('.marquee');
      var $content = $marquee.find('.content');//找到类名为content的元素
      var $list = $content.find('.list');//找到类名为list的元素
      var outerWidth = 300, outerHeight = 327, speed = 4;
      var listlength = $list.length;//list的个数
      var contentWidth = outerWidth * listlength;//content的宽度
      // js设置 marquee的css样式
      $marquee.css({
          "width": `${outerWidth}px`,
          "height": `${outerHeight}px`
      });
      //js设置 content的css样式
      $content.css({
          'width': `${contentWidth}px`,//设置宽度
          'height': `${outerHeight}px`,
          'animation': `run ${speed * listlength}s linear infinite`
      });
      //js设置 list的css样式
      $list.css({
          'width': `${outerWidth}px`,
          'height': `${outerHeight}px`
      });
      // 给样式表注入一个规则
      style.insertRule(`
          @keyframes run {
              100% {
                  transform: translateX(-${contentWidth}px);
              }
          }
      `)
  })

  整理了一下格式，尝试了一下是没有问题的呀。

  请题主给些别的信息。
  

  
  

  0 0