Question

我很绝望。我已经尝试了一百万件事来使这个图像在桌面上工作，现在它已经发现，我注意到它没有在ipad上显示。它在我的手机上（galaxy s3），但它不可拖动!! :(

这是一张世界地图，希望它能够从欧洲开始，但能够拖动它以便您可以看到整个图片。

当你查看这段代码时，你可能会生病...对不起!!!

HTML

</div>
    <div id="screen"><h6>CTS WORLDWIDE INSTALLATIONS</h6>
</div>

CSS

#screen {
display:block;
float:left;
margin:25px 0 0 0;
width:699px; 
height:358px; 
background-image: url(http://ctsmedia.co.uk/_images/desktop/EMEA_map.png);
background-position: 50% 35%;
background-repeat: no-repeat;

}

SCRIPT

$(document).ready(function(){
var $bg = $('#screen'),
    elbounds = {
        w: parseInt($bg.width()),
        h: parseInt($bg.height())
    },
    bounds = {w: 3609 - elbounds.w, h: 1858 - elbounds.h},
    origin = {x: -1361, y: -315},
    start = {x: -1361, y: -315},
    movecontinue = false;

function move (e){
    var inbounds = {x: false, y: false},
        offset = {
            x: start.x - (origin.x - e.clientX),
            y: start.y - (origin.y - e.clientY)
        };

    inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w;
    inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h;

    if (movecontinue && inbounds.x && inbounds.y) {
        start.x = offset.x;
        start.y = offset.y;

        $(this).css('background-position', start.x + 'px ' + start.y + 'px');
    }

    origin.x = e.clientX;
    origin.y = e.clientY;

    e.stopPropagation();
    return false;
}

function handle (e){
    movecontinue = false;
    $bg.unbind('mousemove', move);

    if (e.type == 'mousedown') {
        origin.x = e.clientX;
        origin.y = e.clientY;
        movecontinue = true;
        $bg.bind('mousemove', move);
    } else {
        $(document.body).focus();
    }

    e.stopPropagation();
    return false;
}

function reset (){
    start = {x: 0, y: 0};
    $(this).css('backgroundPosition', '0 0');
}

$bg.bind('mousedown mouseup mouseleave', handle);
$bg.bind('dblclick', reset);
});
</script>

对这位绝望的设计师的任何想法都会非常感激。

非常感谢

Ps。：哦，我对脚本没什么了解。甚至没有jquery和javascript之间的区别......我是一个自学者

Answer 1

你的形象有多大？出于内存考虑，Mobile Safari对于图像的建议限制为1024x1024，并且在超过该尺寸时我已经让它无法预测。我建议为手机/平板电脑尝试较小的图片。见：

Image size limitations in mobile safari?

编辑：我刚看到它是3609x2105像素。试试较小的版本

可拖动的背景图像不显示在iPad上

1 个答案: