javascriptにて、divに動的にimageをセットするスクリプトを作っています。
<div id="screen2" position: relative;" ></div> <div id="screen3" position: relative;" ></div>screen2とscreen3のdivに同じ画像をセットしたいのですが、うまくいきません。
screen3は原寸サイズ、screen2は原寸の3分の1のサイズになるようにしています。
下記のスクリプトでscreen2のみ、screen3のみで実行するとそれぞれのスクリーンに綺麗に画像が
設定されるのですが、同時に行うとscreen3のみにセットされます。(実行順を入れ替えるとscreen2のみになる)
何か間違っていますでしょうか。
javascript
1 2 function addImage(path, x, y, width, height) { 3 4 $('#screen2 .bg2').remove(); 5 $('#screen3 .bg3').remove(); 6 7 var img = $('<img>').attr({ 8 'src': path, 9 }).css({ 10 width: '100%', 11 height: '100%' 12 }); 13 14 if (!width) width = img.prop('naturalWidth'); 15 if (!height) height = img.prop('naturalHeight'); 16 17 $('<div class="bg2">').resizable({ 18 containment: 'parent' 19 }).draggable({ 20 containment: 'parent', 21 scroll: false 22 }).css({ 23 width: width / 3, 24 height: height / 3, 25 left: x / 3, 26 top: y / 3, 27 zIndex: '0', 28 position: 'absolute', 29 30 }).append(img).appendTo('#screen2'); 31 32 33 $('<div class="bg3">').resizable({ 34 containment: 'parent' 35 }).draggable({ 36 containment: 'parent', 37 scroll: false 38 }).css({ 39 width: width , 40 height: height , 41 left: x , 42 top: y , 43 zIndex: '0', 44 position: 'absolute', 45 46 }).append(img).appendTo('#screen3'); 47 48 }; 49
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/24 10:11