javascript - $ slider .css( {'transform' : 'translateY(' + (-$height * $counter) + 'px)' })

Question

$slider.css({
    'transform' : 'translateY(' + (-$height * $counter) + 'px)'
})   

我一直在绞尽脑汁地研究这段代码。有人可以向我详细解释/打破这个吗？

Answer 1

这就是我对这段代码的理解:

$slider.css({
    'transform' : 'translateY(' + (-$height * $counter) + 'px)'
})

$slider 是 DOM Element您可以使用 javascript 在其上应用 css。

$height 是一个变量，包含一些代表高度值的数值。

$counter 是一个包含数值的变量。根据它的名字，它是一个计数器值。

整个代码应用Transform css 属性到 $slider 变量引用的 DOM 元素。

如果我们用它们的值替换这些变量，我们会:

var $height = 5
var $counter = 3
var $slider = $(".slider")
$slider.css({
     'transform' : 'translateY('+ (-$height*$counter)+ 'px') //equals to 'transform' : 'translateY('+ (-5*3)+ 'px')
})