jquery - 动态调整分成几部分的图像

Question

我正在使用 jquery mobile 开发移动应用程序。我正在寻找一种解决方案来完成以下任务:

一个大图像被分成三个独立的可点击图像

图像必须始终看起来像一个大图像，但必须调整大小以适应所有可用空间，同时保持宽度/高度比。

有没有人做过这样的事情？

我曾尝试使用表格并使用 jquery 移动“内容网格”但没有成功。

Answer 1

我会将图像保存为一个图像并使用以下 - 底部的工作 fiddle 链接。您可以更改“low_starts_here”和“right_starts_here”以满足您的需要。您也可以在 css 中切换到“width:auto;height:100%”，如果这对您来说更好的话。

html:

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

CSS:

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

j查询:

$(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/