1

品質およびその他のすべてのコーダーにこんにちは！

定義されたスペース内に画像をランダムに配置する jquery スクリプト (作成者: Marco Kuiper - www.marcofolio.net) を使用しています。マウスを使用して、画像を画面上でドラッグし、クリックして拡大できます。

問題は、このページを iPhone で表示した場合、画像をドラッグできないため、画像が重なっている場合に簡単にタップして拡大することができないことです。私の考えは、少なくとも各画像の幅だけ互いに離れているランダムな座標の配列を作成しながら、囲んでいる div の範囲に収まるようにすることです。画像はすべて同じ寸法です。その配列が作成されたら、その値を使用して画像を配置します。

画像を配置する現在のスクリプトは次のとおりです。

        $(".polaroid").each
(function ()
    {
    var tempVal = Math.round(Math.random());
    if(tempVal == 1)
        { var rotDegrees = randomXToY(330, 360); } // rotate left
    else
        { var rotDegrees = randomXToY(0, 30); } // rotate right

    var position = $(this).parent().offset();
    var wiw = $(this).parent().width(); // width of div enclosing object
    var wih = $(this).parent().height(); // heiht of div enclosing object

    var leftpos = Math.random()*(wiw - $(this).width()) + position.left;
    var toppos = Math.random()*(wih - $(this).height()) + position.top;

    var cssObj =
        {
        'left' : leftpos,
        'top' : toppos,
        '-webkit-transform' : 'rotate('+ rotDegrees +'deg)',  // safari only
        '-moz-transform' : 'rotate('+ rotDegrees +'deg)',  // firefox only
        'tranform' : 'rotate('+ rotDegrees +'deg)' // if CSS3 is standard
        };
    $(this).css(cssObj);
    }
);

私のスクリプト作成スキルはこれには十分ではないので、助けていただければ幸いです。

ありがとう！

4

1 に答える 1

0

グリッド レイアウトを支援するために HTML と CSS を確認する必要がありますが、javascript に関する限り、ランダムな回転で十分な場合は、配置に関するビットを削除するだけで済みます。

$(".polaroid").each
  (function ()
    {
    var tempVal = Math.round(Math.random());
    if(tempVal == 1)
        { var rotDegrees = randomXToY(330, 360); } // rotate left
    else
        { var rotDegrees = randomXToY(0, 30); } // rotate right

    var cssObj =
        {
        '-webkit-transform' : 'rotate('+ rotDegrees +'deg)',  // safari only
        '-moz-transform' : 'rotate('+ rotDegrees +'deg)',  // firefox only
        'tranform' : 'rotate('+ rotDegrees +'deg)' // if CSS3 is standard
        };
    $(this).css(cssObj);
    }
  );
于 2012-02-02T19:19:50.983 に答える