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 に答える