$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是使用javascript应用css的DOM元素。

$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')
})

Answer 2

它将样式应用于变量滑块中的元素。样式是transform-css-prorty，其值是用可变高度和可变计数器的负数相乘计算的translate Y