Question

好吧，我不知道return函数中的transform是否可以正常工作，但是，有人知道是否有办法可以得到类似的东西？将函数放在对象中......

var t = $(this).scrollTop();
var h = $(window).height();

function transform(val){
    return "-webkit-transform": "translateY(" + val + "%)",
    "-ms-transform": "translateY(" + val + "%)",
    "transform": "translateY(" + val + "%)";
}

$("#header").css({
    opacity: 50 * (t/h),
    tranform(50 * (t/h))
});

Answer 1

您可以使用CSS扩展语言（如LESS或SCSS）来处理变量，然后只需处理并使用一些简单的样式表。

如果您想坚持使用JS，我建议您从transform返回一个哈希值并稍后进行扩展，例如：

function transform(val) {
  return {
    "-webkit-transform": "translateY(" + val + "%)",
    "-ms-transform": "translateY(" + val + "%)",
    "transform": "translateY(" + val + "%)"
  }
}

function transformWithOpacity(val) {
  var base = transform(val);
  base["opacity"] = val;
  return base;
}

var num = 50 * (t/h);
$("#header").css(transformWithOpacity(num));

Answer 2

您可以使用JQuery extend功能

$("#header").css($.extend({
    opacity: 50 * (t/h)
  },
  tranform(50 * (t/h))
));

对象内部的功能

2 个答案: