0

我很绝望。我已经尝试了一百万种方法来让这个图像在桌面上工作，现在它是，我注意到它没有显示在 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;

}

脚本

$(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 之间的区别......我是一个自学者

4

1 回答 1

0

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

移动 Safari 中的图像大小限制？

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

于 2013-06-07T09:08:50.270 回答