0 
<script src="http://code.jquery.com/jquery-1.9.1.min.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>33 && 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>

<style type="text/css">
    .hide {display:none;}
    .show {display:inherit;}
</style>

<input type="range" name="slider" id="slider" value="0" min="0" max="100"/>
<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>

正如上面的代码所示，这将创建一个 HTML5 范围滑块，根据滑块旋钮的位置在 3 个不同的 div 之间渐变。我的问题是滑块在 IE 中看起来很糟糕。我需要自定义它的外观，使其在浏览器中看起来一致。

我试过使用 jQuery Mobile，它解决了这个问题。但是它会导致与 WordPress 的第二十二个主题中使用的 js 发生冲突。我试图解决这些冲突无济于事。我已经在 jQuery UI 中加载并且没有发生冲突。

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

上面的代码创建了 UI 滑块，但我一直在阅读 jQuery API 文档并且不了解如何更改我的脚本以更改显示的内容。非常感谢您的专业知识！

4

1 回答 1

1

尝试这个：

HTML：

<div id="slider"></div>
<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>

JS：

$(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");
            }
        }
    });
});

CSS：

.hide {display:none;}
.show {display:inherit;}

小提琴：http: //jsfiddle.net/NxGZa/

于 2013-10-23T18:57:48.810 回答