0 
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<script>
$(function() {
    $("#slider").slider({
        slide: function(event, ui) {
            if (ui.value < 33) {
                $("#1").fadeIn("slow");
                $("#2").fadeOut("slow");
                $("#3").fadeOut("slow");
            }
            else if (ui.value < 66) {
                $("#1").fadeOut("slow");
                $("#2").fadeIn("slow");
                $("#3").fadeOut("slow");
            }
            else {
                $("#1").fadeOut("slow");
                $("#2").fadeOut("slow");
                $("#3").fadeIn("slow");
            }
        }
    });
});
</script>

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

<div id="content" >
    <div id="1" style="position:absolute;z-index:0;">A</div>
    <div id="2" style="position:absolute;z-index:1;display:none;">B</div>
    <div id="3" style="position:absolute;z-index:2;display:none;">C</div>
</div>

上面的代码使用 jQuery UI 创建一个滑块。滑块在 3 个不同 div 的内容之间淡出。该代码在计算机上很棒，但它创建的滑块在手机上却不能滑动。在移动设备上可以正常工作的方法如下：

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    function changecontent()
        {
        if (document.getElementById("slider").value<33){
            $("#1").fadeIn("slow");
            $("#2").fadeOut("slow");
            $("#3").fadeOut("slow");
        } else if (document.getElementById("slider").value<66){
            $("#1").fadeOut("slow");
            $("#2").fadeIn("slow");
            $("#3").fadeOut("slow");
        } else if (document.getElementById("slider").value>66){
            $("#1").fadeOut("slow");
            $("#2").fadeOut("slow");
            $("#3").fadeIn("slow");
        }
    };
</script>

<input type="range" name="slider" id="slider" value="0" min="0" max="100" onchange="changecontent()"/>
<div id="content">
    <div id="1" class="show" style="position:absolute;z-index:0;">A</div>
    <div id="2" class="hide" style="position:absolute;z-index:1;">B</div>
    <div id="3" class="hide" style="position:absolute;z-index:2;">C</div>
</div>

上面的代码在所有浏览器（移动设备或非移动设备）上都“工作”，但不允许样式选项，并且在每个浏览器上看起来都不同。我对它在移动设备上的显示方式很好，但讨厌它在 IE 上的外观，讨厌它在 Firefox 上的功能。

是否有足够熟练的 JS/jQuery 大师将这些结合起来，以便网站可以根据屏幕分辨率/查看它的设备来选择其中的一种？我也对其他选择持开放态度。但由于 JS 与我正在使用的模板冲突，我无法使用 jQuery Mobile。jQuery UI 工作正常。

4

2 回答 2

0

在 jqueryui 之后包括http://touchpunch.furf.com/应该可以解决您的问题。它修改 jqueryui 以支持触摸事件。默认情况下，jqueryui 只支持鼠标事件。

于 2013-10-23T22:20:00.483 回答
0

这里有一个可能对你有用的小调整： http ://www.fourfront.us/blog/jquery-window-width-and-media-queries

如果#slider 的某个 CSS 属性发生更改，因为用户在移动设备上查看它，您可以捕捉到它并将不同的 JavaScript 部分应用于您的滑块。

它似乎比通过 JS 捕获窗口/设备更安全。

于 2013-10-23T22:22:34.073 回答