0

从我假设的一段相当简单的滑块代码来看，这些事件根本不会触发，它让我发疯。不知道我错过了什么，所以任何帮助都会很大。

麻烦的页面可以在这里找到... http://ardaneworldwide.com/home2.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Ardane Worldwide</title>
        <link rel="stylesheet" type="text/css" href="slider_entry/style.css"/>
    </head>
    <body>
        <div class="wrapper">
            <img src="/slider_entry/header-bg.jpg" />
            <div id="unlock-bottom">
                <div id="slide-to-unlock"></div>
                <div id="unlock-slider-wrapper">
                    <div id="unlock-slider">
                        <div id="unlock-handle"></div>
                    </div>
                </div>
            </div>
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="/slider_entry/ui.core-1.5.3.js"></script>
        <script type="text/javascript" src="/slider_entry/ui.slider.js"></script>
        <script type="text/javascript" src="/slider_entry/iphone-unlock.js"></script>
    </body>
</html>

JS

$(document).ready(function(){
    $("#unlock-slider").slider({
        handle: "#unlock-handle",
        animate: true,
        slide: function(e,ui){
            $("#slide-to-unlock").css("opacity", 1-(parseInt($("#unlock-handle").css("left"))/120));
        },
        stop: function(e,ui){
            if($("#unlock-handle").position().left == 205){
                window.location="index.php";
            }
            else {
                $("#unlock-handle").animate({left: 0}, 200 );
                $("#slide-to-unlock").animate({opacity: 1}, 200 );
            }
        }
    });
});

谢谢。

4

1 回答 1

0

见这里：http: //jsfiddle.net/vdxWm/

要触发滑动和停止功能，您需要更新到更新版本的 jquery ui/slider。

最新版本的滑块不允许您覆盖手柄元素，因此您可以针对它设置样式，或者使用一些代码来调整自定义手柄的位置，如下所示。 

$("#unlock-slider").slider({
    animate: true,
    slide: function(e,ui){
        var han = $("#unlock-handle"),
            con = $("#unlock-slider"),
            left = (con.width() - han.width())/con.width() * ui.value + '%';

        han.css('left', left);

        $("#slide-to-unlock").css("opacity", 1-(parseInt($("#unlock-handle").css("left"))/120));
    },
    stop: function(e,ui){
        if($("#unlock-handle").position().left == 205){
            //window.location="index.php";
            console.log('done');
        }
        else {
            $("#unlock-handle").animate({left: 0}, 200 );
            $("#slide-to-unlock").animate({opacity: 1}, 200 );
        }
    }

});
于 2012-12-05T23:57:58.720 回答