Question

当我使用css transform: scale(x)

缩放jQuery时，我遇到了一些问题

据我所知，滑块拖动时像素的计算在缩放时是不正确的，但有没有解决方法？

以下是我的问题示例：

＆＃13;

$('.slider-1').slider();
$('.slider-2').slider();

＆＃13;

.wrapper-1,
.wrapper-2
{
  padding: 25px;
  width: 500px;
}
.slider-2 {
  marggin-top: 50px;
  transform: scale(0.6);
  transform-origin: 0;
}

＆＃13;

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div class="wrapper-1">
  <p>Slider normal</p>
  <div class="slider-1"></div>
</div>
<div class="wrapper-2">
  <p>Slider transformed (scaled)</p>
  <div class="slider-2"></div>  
</div>

＆＃13;

Answer 1

它不会工作导致职位变化百分比。因此它正确移动但看起来是错误的，因为它不在鼠标光标的位置要获得正确的结果，您可以设置滑块的width height和top，手动处理

＆＃13;

$('.slider-1').slider();
$('.slider-2').slider();

＆＃13;

.wrapper-1,
.wrapper-2 {
  padding: 25px;
  width: 500px;
}

.slider-2 {
  margin-top: 50px;
  height: 5px !important;
  width: 100px;
}

.slider-2 span {
  transform: scale(0.6);
  top:-9px !important;
}

＆＃13;

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div class="wrapper-1">
  <p>Slider normal</p>
  <div class="slider-1"></div>
</div>
<div class="wrapper-2">
  <p>Slider transformed (scaled)</p>
  <div class="slider-2"></div>
</div>

＆＃13;

Answer 2

我认为你不能那样做。我也尝试使用scale并且它给出了相同的行为。你可以只改变元素的宽度/高度，它很容易设计。

$('.slider-1').slider();
$('.slider-2').slider();

.wrapper-1,
.wrapper-2
{
  padding: 25px;
  width: 500px;
}
.slider-2.ui-slider-horizontal {
  marggin-top: 50px;
  transform-origin: 0;
  width: 60%;
  height: .5em;
}
.slider-2.ui-slider .ui-slider-handle {
  width: .8em;
  height: .8em;
  top: -0.2em;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div class="wrapper-1">
  <p>Slider normal</p>
  <div class="slider-1"></div>
</div>
<div class="wrapper-2">
  <p>Slider transformed (scaled)</p>
  <div class="slider-2"></div>  
</div>

css规模的jQueryUI滑块问题

2 个答案: