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 に設定していますが、そのサイズを超えると予期せぬ動作をすることがありました。モバイル/タブレット用に小さい画像を試すことをお勧めします。見る：

モバイルサファリの画像サイズ制限?

編集: 3609x2105 ピクセルであることがわかりました。小さいバージョンを試す

于 2013-06-07T09:08:50.270 に答える