Question

我正在使用应用程序中的一些CSS背景（http://css3pie.com/demos/gradient-patterns/），并希望能够使用滑块缩放设计。这是JSFiddle。我能够扩展X＆amp; Y分别就像条纹和野餐设计一样，我只需要像background-size:50px 50px;一样玩：

//setup the variables based off the css which was set using dropdown
gridItems = $(document.activeElement).val().split("; ");
for (i = 0; i < gridItems.length -1; i++) {
    gridSettings = gridItems[i].split(":");

    if (gridSettings[0]=="background-size"){
        gridSize = gridSettings[1].split(" ");
        gridX = gridSize[0];
        gridY = gridSize[1]
        }
   //on the action of the slide - update value
    $('#gridXY-'+key).on("slide", function(slideEvt) {
        gridXY = slideEvt.value;
        $('.draggable-' + currentLayer).css("background-size", "calc("+ gridX +" * "+ gridXY +") calc("+ gridY +" * "+ gridXY +")");
    });

可以用数字方式设置，也可以使用，但是当它到达蓝色打印时，它有更多的设置background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;

我正在努力做到这一点，以便它可以采取可变数量的那些，并可以编写可以工作的东西，但我想到的方法是非常混乱，希望有一些帮助缩放这可能是一个比我想做的更干净。

我确实找到了这个：http://codepen.io/Erik/pen/JGnsB但他正在使用LESS来声明变量，如果可能的话我想远离它。

更新：这是一个JSFiddle：http://jsfiddle.net/4L3d9qh2/

我添加了一个应该让我更新它的函数，但由于某种原因，calc（）函数似乎没有用来更新div样式。处理后，它看起来像这样： $('.draggable-0').css("background-size", calc(100px - 4) calc(100px - 4), calc(100px - 4) calc(100px - 4), calc(20px - 4) calc(20px - 4), calc(20px - 4) calc(20px - 4));

$.each(gridSizeArray, function( k, v ){
            if (gridIncrement==1)
            {
                gridXY = "calc(" + v +" - " + value + ") ";
            }else{
                if(isOdd(gridIncrement)){
                gridXY = gridXY + "calc(" + v +" - " + value + ") ";
                }else{
                gridXY = gridXY + "calc(" + v +" - " + value + "), ";
                }
            }


            gridIncrement++
            })

Answer 1

这是最终的代码。使用.each（）循环，如果是偶数，添加一个逗号，然后删除最后一个逗号。

CimInstance

缩放背景CSS与滑块

1 个答案: