2012-03-28 24 views
0

私は携帯電話用のウェブサイトを作っています。 複数の列があります。たとえば、メニューの場合は1、ブックのコンテキストの場合は1、その隣には脚注や画像情報が格納されます。jqueryで画像を移動

携帯電話では、その時に1つの列しか表示されません。ジャイロスコープのジェスチャーを使用して、次の列に垂直にスクロールします。

私は画像を動かすことができません。だから誰かがそれを助けることができたら。 重要なのは、イメージがあった場所に一度のテキストの中に空のスペースを形成する必要があることです。また、最初の列が変更された場合でも、3列目の画像は正しいはずです。したがって、画像の位置は2列目を基準にする必要があります。 テスト用の最初のコリンの幅を変更するボタンがあります。

私はjsfiddle(私の最初の!)を作成しましたが、動作しませんが、私のホストでは、コード作業の罰金はイメージを除いて動きません。だから私は私のjsfiddleに何か間違っていると思う(もしそうなら私は次回に起こるのを防ぐことができます)。あなたがオンラインであなたのイベントハンドラを宣言しているため

http://jsfiddle.net/UpKAM/

+0

をあなたが(jQueryの.animateをご覧ください) –

答えて

2

代わりにこれを試してみてください:

$('.b_image').each(function() { 
    var xPos = $(this).offset().left; 
    xPos += 200; 
    $(this).offset({'left':xPos}); 
}); 

http://jsfiddle.net/UpKAM/7/

0

はあなたのフィドルは動作しません(のReferenceErrorは:changeColumnWidth:変数を見つけることができません)。これらをjavascript領域に移動します。これはとにかく良い練習であり、jsfiddleはインライン宣言をサポートしていません。

http://jsfiddle.net/EfDas/

あなたのコードが実際に動作する、あなただけのイメージにposition: relativeを追加する必要があるか、それは移動しません。

フィドルを作る時間を取るための表彰。もう一つの注意として、あなたのフィーリングhtmlにhead/bodyタグを含めないでください。これはものを混乱させる。すでに含まれているリソース(jqueryなど)も含めないでください。左のパネルを使って、このようなものを追加することができます。

+0

THX、 がインライン宣言何ですか? – clankill3r

+0

@ clankill3r - あなたがあなたのhtmlの中にあなたのjavascriptを宣言したときです。 '

+0

upkamはそれをしませんでしたが、それは働いています – clankill3r