4

現在、jQuery と hover 関数を使用して以下のコードを使用して、ユーザーが画像にカーソルを合わせたときに「キャプション」要素をフェードインしています。これはデスクトップ ブラウザーでは完全に機能しますが、ホバー機能をトリガーするためにユーザーが画像をタップする必要がある iPad などのモバイル タッチ デバイスでテストすると、キャプションは期待どおりにフェードインしますが、ユーザーがページ上の別のオブジェクトを選択するまでアクティブなままになります。

JavaScript コードを変更してモバイル タッチ デバイスを検出し、一定時間後に自動的にフェードバックするように、キャプションに並べ替えまたはタイマーを配置する簡単な方法を知りたいですか?

<!-- include jQuery library -->
<script type="text/javascript" src="./_js/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    //On mouse over those thumbnail
    $('.item-caption').hover(function() {

        //Display the caption
    $(this).find('.caption').stop(false,true).fadeIn(200);
    },
    function() {    

    //Hide the caption
    $(this).find('.caption').stop(false,true).fadeOut(600);
});

});
</script>

</head>
<body>

    <div class="item-caption"><a href="http://www.domain.com">
        <div class="caption">   
            <ul>
                <li><h2>TITLE</h2></li>
                <li><h3>Description</h3></li>
            </ul>       
        </div>
        <img src="./_img/example_image.jpg"></a>
    </div>

</body>

どんなアイデア、考えでも大歓迎です。

クリス

4

2 に答える 2

1

機能検出を使用してタッチデバイスを検出し、それに応じて時間遅延を使用して動作を適応させることができますfadeOut()。

$(document).ready(function() {

    function hasTouch() {
        try {
           document.createEvent("TouchEvent");
           return(true);
        } catch (e) {
           return(false);
        }    
    }
    var touchPresent = hasTouch();

    //On mouse over those thumbnail
    $('.item-caption').hover(function() {

        //Display the caption
        var caption = $(this).find('.caption');
        caption.stop(true, true).fadeIn(200);
        // on touch systems, fade out after a time delay
        if (touchPresent) {
            caption.delay(5000).fadeOut(600);
        }
    }, function() {    

        //Hide the caption
        $(this).find('.caption').stop(true, true).fadeOut(600);
    });

});
于 2012-11-16T19:27:07.677 に答える
0

次のように、navigator.userAgent.match を使用してモバイル デバイスを検出できます。

onMobile = false;
// Mobile device detect - terrible, yes, but whatever
if( navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/Blackberry/i)
){
onMobile = true;                   
}

document.ready または任意の場所で - onMobile が true であるかどうかを確認し、そうである場合は自分のことを行います。

于 2012-11-16T17:33:19.530 に答える