Question

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

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

一切都在缩放状态下正常工作，问题出现在滑块上，滑动时不会通过点击他（当他的父母被缩放时）触发。

<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（） - 我页面的缩放包装。

请帮助，谢谢。

Answer 1

使用slide构造函数中的change和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
}

Answer 2

如果有人也会遇到这个问题，那就是我如何解决它。

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

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

                if (scale < 100) { // detect zooming
                    $('.slider').css('height', '0px'); //setting height of slider to 0, so user can't click on it
                }

jQuery UI滑块小部件+ fancybox +缩放/缩放

2 个答案: