1

jquery mobileを使用してモバイルアプリケーションを開発しています。次のことを達成するためのソリューションを探しています。

大きな画像は、クリック可能な 3 つの個別の画像に分割されます

例

画像は常に 1 つの大きな画像のように見える必要がありますが、幅と高さの比率を維持しながら、使用可能なすべてのスペースに合わせてサイズを変更する必要があります。

誰かが前にこのようなことをしたことがありますか?

テーブルを使用して、jquery モバイルの「コンテンツ グリッド」を使用しようとしましたが、成功しませんでした。

4

1 に答える 1

1

画像を1つの画像として保存し、次を使用します-下部にある作業フィドルリンク。"low_starts_here" と "right_starts_here" は必要に応じて変更できます。また、CSS で「width:auto;height:100%」に切り替えることもできます。

html:

<img src="/myimage.jpg" id="myimage" />

CSS:

#myimage{
 width:100%;
 height:auto;    
}

jquery:

$(function() {    
    $('#myimage').on('click', function(e){
        var area = '';
        var low_starts_here = 0.6;
        var right_starts_here = 0.5;
        var x = Math.round(e.pageX - $(this).offset().left);
        var y = Math.round(e.pageY - $(this).offset().top);
        var w = $(this).width();
        var h = $(this).height();
        if(y/h > low_starts_here){
            // bottom area - do something
            alert('bottom');
        }
        else{
            if(x/w > right_starts_here){
               // top right area - do something
               alert('top right');
            }
           else{
               // top left area - do something
               alert('top left');
            }
        }

    });
});

http://jsfiddle.net/uLHhQ/6/

于 2012-08-29T08:03:03.680 に答える