使用幻灯片 ui 增加 css 宽度百分比

Question

我希望使用 Jquery 增加 div 的宽度，它是 ui 滑动功能。我希望使用处理程序来完成此操作。

div 的宽度和高度最初设置为百分比，我想在每个幻灯片步骤中将宽度增加 5%。

这是我目前拥有的。如果我将函数内的 css 设置为 10，而不是“10%”，则幻灯片可以工作，但使用像素而不是百分比。我怎样才能使用百分比达到同样的效果。

HTML

 <div id="slider"></div>
    <div id="boxout">
       <div id="box"></div>
    </div>

CSS

 #slider {
width: 200px;
margin: 50px auto;
}

#boxout {

  width: 200px;
  height: 200px;
  margin: 0 auto;
}

#box {

  width: 10%;
  height: 10%;
  background: red;
}

JQUERY

$(function() {
    $("#slider").slider({    
        min:0, max: 5,
        slide: function(event,ui){
            $("#box").css('width','10%'*(1+(ui.value)));

        },
    });
});

这是 fiddle：http://jsfiddle.net/yq3ocs47/

非常感谢

Answer 1

您正在尝试将字符串与数字相乘。您只需要调整那条线：

$("#box").css('width', 10*(1+(ui.value)) + "%");

Answer 2

$(function() {
    $("#slider").slider({    
        min:0, max: 20,
        slide: function(event,ui){
            $("#box").css('width',(ui.value*5) + '%');
        },
    });
});

我想这就是你想要的，基本上如果你想让它成长 5% 你需要 20 steps。 100/20 = 5

所以你取 ui.value 并用 5 计时，所以你有 [0,5,10,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100]

使用幻灯片 ui 增加 css 宽度百分比

Increase css width in percent with slide ui

jquery

uislider