javascript - CSS3 根据它们具有的属性转换多个 div

Question

我正在尝试编写一些允许 HTML 的 JS:

     <div class="box" data-vert-speed="7">ContentDiv1</div>
     <div class="box" data-hori-speed="10">ContentDiv2</div>
     <div class="box" data-rota-speed="5">ContentDiv3</div>
     <div class="box" data-vert-speed="2.4">ContentDiv4</div>
     <div class="box" data-hori-speed="1.3">ContentDiv5</div>
     <div class="box" data-rota-speed="2.3">ContentDiv6</div>

在页面滚动时对每个 div 执行 CSS 转换(转换率由属性值决定。

其中“vert”、“hori”和“rota”分别是 CSS 转换垂直、水平和旋转。

我的 JS 适用于其中一种类型，但我无法让它检测所有三种类型的属性并执行它们。

     $.fn.moveItrota = function(){
      var $windowr = $(window);
      var instancesr = [];

      $(this).each(function(){
        instancesr.push(new moveItItemrota($(this)));
      });

      window.onscroll = function(){
        var scrollTopr = $windowr.scrollTop();
        instancesr.forEach(function(instr){
          instr.updater(scrollTopr);
        });
      }
    }

    $.fn.moveItvert = function(){
      var $windowv = $(window);
      var instancesv = [];

      $(this).each(function(){
        instancesv.push(new moveItItemvert($(this)));
      });

      window.onscroll = function(){
        var scrollTopv = $windowv.scrollTop();
        instancesv.forEach(function(instv){
          instv.updatev(scrollTopv);
        });
      }
    }

    $.fn.moveIthori = function(){
      var $windowh = $(window);
      var instancesh = [];

      $(this).each(function(){
        instancesh.push(new moveItItemhori($(this)));
      });

      window.onscroll = function(){
        var scrollToph = $windowh.scrollTop();
        instancesr.forEach(function(insth){
          insth.updateh(scrollToph);
        });
      }
    }



    //Rotation Scrolling ------------------------------------------------

    if ($('.box').attr('data-rota-speed')){
     console.log("found a rota");   
    var moveItItemrota = function(elr){
      this.elr = $(elr);
      this.speedr = parseInt(this.elr.attr('data-rota-speed'));
      console.log(this.speedr);
    };

    moveItItemrota.prototyper.updater = function(scrollTopr){
      var posr = scrollTopr / this.speedr;
      this.elr.css('transform', 'rotate(' + -posr + 'deg)');
    };

    $(function(){
      $('[data-rota-speed]').moveItrota();
    });

    };

    //Horizontal Scrolling ------------------------------------------------

    if ($('.box').attr('data-hori-speed')){
    console.log("found a hori");
    var moveItItemhori = function(elh){
      this.elh = $(elh);
      this.speedh = parseInt(this.elh.attr('data-hori-speed'));
      console.log(this.speedh);
    };

    moveItItemhori.prototypeh.updateh = function(scrollToph){
      var posh = scrollToph / this.speedh;
      this.elh.css('transform', 'translateX(' + -posh + 'px)'); 
    };

    $(function(){
      $('[data-hori-speed]').moveIthori();
    });

    };

    //Vertical Scrolling ------------------------------------------------
    if ($('.box').attr('data-vert-speed')){
    console.log("found a vert");

    var moveItItemvert = function(elv){
      this.elv = $(elv);
      this.speedv = parseInt(this.elv.attr('data-vert-speed'));
      console.log(this.speedv);
    };

    moveItItemvert.prototype.updatev = function(scrollTopv){
      var posv = scrollTopv / this.speedv;
      this.elv.css('transform', 'translateY(' + -posv + 'px)');
    };

    $(function(){
      $('[data-vert-speed]').moveItvert();
    });

    };

Answer 1

我可以从您的代码中看出您在同一属性上有 2 个数据点，我建议将它们分开(如果可能)。根据您的代码，我假设每个元素都有单一的移动类型和移动速度。如果有多个，则可能需要进行一些调整。如果我的假设是正确的，你可以这样做:

<div class="box" data-movement="vertical" data-speed="7">ContentDiv1</div>
<div class="box" data-movement="horizontal" data-speed="10">ContentDiv2</div>
<div class="box" data-movement="rotation" data-speed="5">ContentDiv3</div>
<div class="box" data-movement="vertical" data-speed="2.4">ContentDiv4</div>
<div class="box" data-movement="horizontal" data-speed="1.3">ContentDiv5</div>
<div class="box" data-movement="rotation" data-speed="2.3">ContentDiv6</div>

然后在js上，获取元素并应用css

var boxItems = $(".box");
$.map(boxItems, function(item, i) {
   var movement = $(item).data("movement");
   var speed = $(item).data("speed");
   switch(movement) {
      case "horizontal": {
         // move horizontally (not sure if this is done with transforms)
         break;
      }
      case "vertical": {
         // move vertically (not sure if this is done with transforms)
         break;
      }
      case "rotation": {
         // rotate (not sure if this is done with transforms)
         break;
      }
   }
});

我没有编写移动代码，因为不确定您是否正在使用 css 转换...但为了以防万一，这里有一个描述如何应用它的链接。

http://www.w3schools.com/jsref/prop_style_transform.asp

希望这对您有所帮助。