Question

以下是我为SVG编写的代码。我试图在用户滚动时操纵ID #temp的height属性。

<svg 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 25.25 104" enable-background="new 0 0 25.25 104" xml:space="preserve">
  <rect  id="temp" width="10"  style="fill:rgb(0,0,255);" transform="rotate(180,5,2)" x="-7" y="-100">
   <!-- <animate attributeName="height" from="0" to="95" dur="3s"/> --> 
  </rect>


<path id="thermo" d="M15.8,0H9.2C4.679,0,1,3.678,1,8.199V95.8c0,4.521,3.679,8.2,8.2,8.2h6.6c4.521,0,8.23.679,8.2-8.2V8.199
C24,3.678,20.321,0,15.8,0z M22,95.8c0,3.419-2.781,6.2-6.2,6.2H9.2C5.781,102,3,99.219,3,95.8V84.5h8.25v-2H3v-6.357h8.25v-2H3
v-6.357h8.25v-2H3v-6.356h8.25v-2H3v-6.357h8.25v-2H3v-6.357h8.25v-2H3v-6.357h8.25v 2H3V26h8.25v-2H3V8.199C3,4.781,5.781,2,9.2,2
 h6.6C19.219,2,22,4.781,22,8.199V95.8z"> 
</path>

下面你可以看到我写的JQuery，以便在加载页面时为#temp获得最小高度为5。然后我每次用户滚动时都尝试将height属性增加一。这对我来说似乎没有用。我很感激你的帮助。

var initHeight = $("#temp").attr("height", 5);initHeight();

$(window).on('scroll', function(){

$("#temp").attr("height", 5) ++;

});

Fiddle

Answer 1

问题是你将变量initHeight设置为看似函数的函数，然后将其作为函数调用，但它不是函数。你需要像这样声明它，以便像函数一样使用它：

var initHeight = function(){ $("#temp").attr("height", 5); }

我还为起始编号声明了一个变量，5。在滚动事件中，增加newHeight，然后将高度设置为这个新数字。

var newHeight = 5;

$(document).on('scroll', function(){
    newHeight += 1;
    $("#temp").attr("height", newHeight);
});

您还可以在attr调用内部递增，如下所示：++newHeight在设置之前递增它。使用newHeight++将设置高度，然后递增它。

<强> DEMO

当用户在+ y轴和-y轴上滚动时，如何增加和减少height属性？

1 个答案: