1

我正在使用 jquery UI 滑块（http://jqueryui.com/slider/）。

我需要在整个网站上进行缩放/缩放。使用 css 样式在 IE+Chrome 中缩放 - “缩放”。

在缩放状态下一切正常，问题出在滑块上，滑动只是没有通过单击他触发（当他的父级缩放时）。

这是我的意思的例子 - http://jsfiddle.net/8hbMx/

<style>
    .slider{
      width: 363px;;
      height: 15px;
      margin-left: 40px;
  }
    #test{
      zoom: 50%;
}
 </style>
 <div id="test">
    <div class="slider"></div>
</div>
<script>
    $('.slider').slider({
        min: 1,
        max: 10,
        width: 50,
        value: 1
    });
</script>

这是我如何进行缩放：

                $(window).resize(debouncer(function(e) {
                    scale_elements();
                }));

scale_elements() - 我的页面的缩放包装器。

请帮忙，谢谢。

4

2 回答 2

0

试试这个，在构造函数中使用slideandchange属性slider：

HTML

<div id="zoom-box">
    <div id="slider"></div>
</div>
<div id="debug"></div>  <!-- Remove for production -->

CSS

#slider {
    width: 363px;
    height: 15px;
    margin-left: 40px;
}

JavaScript

$('#slider').slider({
    min: 1,
    max: 100,
    width: 50,
    value: 100,
    slide: updateZoom,
    change: updateZoom
});

function updateZoom() {
    var scale = $('#slider').slider('value');
    $('#zoom-box').css('zoom', (scale) + '%');
    $('#debug').prepend(scale + '<br/>');  // Remove for production
}
于 2013-07-11T17:29:12.047 回答
0

以防万一有人也遇到这个问题，我就是这样解决的。

我无法让它与缩放一起工作，所以我只是关闭滑块点击跟踪并推动他只使用拖动（拖动它更正确地工作）。

关闭拖动有点复杂，我是怎么做到的：

                if (scale < 100) { // detect zooming
                    $('.slider').css('height', '0px'); //setting height of slider to 0, so user can't click on it
                }
于 2013-07-29T09:17:12.243 回答