Question

我有一个SVG是一排盒子，我希望在窗口滚动上缩放150％，然后回到它的原始大小。

我对JavaScript很新，所以我不确定它为什么不起作用。

这是我的JSFiddle

以下是我的代码：

HTML：

<div class="container">
<svg class="scale" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 219.7 104.3" style="enable-background:new 0 0 219.7 104.3;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
</style>
<rect x="18.9" y="15.3" class="st0" width="22.2" height="22.2"/>
<rect x="71.5" y="15.3" class="st0" width="22.2" height="22.2"/>
<rect x="125.3" y="15.3" class="st0" width="22.2" height="22.2"/>
<rect x="177.8" y="15.3" class="st0" width="22.2" height="22.2"/>
<rect x="18.9" y="60.8" class="st0" width="22.2" height="22.2"/>
<rect x="71.5" y="60.8" class="st0" width="22.2" height="22.2"/>
<rect x="125.3" y="60.8" class="st0" width="22.2" height="22.2"/>
<rect x="177.8" y="60.8" class="st0" width="22.2" height="22.2"/>
</svg>
</div>

<div class="spacer"></div>
<div class="spacer"></div>

CSS：

.container {
  width:800px;
}
.spacer {
  height:500px;
}

JS：

  $(window).scroll(function() {
    $(".scale").css({"-moz-transform": scale(150), "webkit-transform": scale(150)});
  });

谢谢，我真的很感激帮助！

Answer 1

我不确定，但您可能忘记在小提琴中初始化jQuery。另外，我将scale属性包装在引号中，并使用1.5而不是150，它似乎乍一看。

每当你像在这里一样将CSS作为对象传递（在{花括号}内）时，像background-color这样的属性就变成了backgroundColor，因为你需要像javascript一样使用camelCase。

此处已更新Fiddle。

 $(window).scroll(function() {
    $(".scale").css({"-moz-transform": "scale(1.5,1.5)", "webkit-transform": "scale(1.5,1.5)"});
  });

Answer 2

几个问题：

您需要将CSS属性的值括在引号中（否则Javascript会尝试将其解释为函数调用，并失败）
比例是一个比例，因此150％应写为1.5，而不是150

所以：

//array of three image urls
//arrays start counting from 0

images = [ 
  "img1.gif",
  "img2.gif",
  "img3.gif",
  "img4.gif"
];

function switchImage() {
  var frame = document.getElementById('frame');
  console.log(frame);
  frame.style.background = 'url(' + images[getRandomNumber()] + ')';
}

function getRandomNumber() {
  //return random num between 0 and array's length
  return Math.floor(Math.random() * images.length);
}

setInterval(switchImage, 1000);

您可能还想要包含标准＆＃34;转换＆＃34;

如何在滚动上缩放SVG？

2 个答案: