Получить доступ к стилю объекта
var tr1 = { name: '1a', obj: pole.innerHTML = "<img src='1a.png' class='obj'>", x: 100, y: 200 } tr1.obj.style.top = 300 +'px'; ( .obj { position: absolute; } ) Не могу сдвинуть картинку. Говорит, что нет такого объекта. Не факт, что так должно работать, просто пытаюсь вспомнить проект, исходники которого утеряны. Как сделать, чтобы можно было обращаться к объекту tr1 с его картинкой на экране? |
evgeniyfill82,
pole.innerHTML = "<img src='1a.png' class='obj'>" var tr1 = { name: '1a', obj: pole.querySelector('.obj'), x: 100, y: 200 } tr1.obj.style.top = 300 +'px'; |
Блин, я в .hta все это вояю. Там говорит, что не поддерживает такой метод. Переименовал в html, там работает. Видимо надо под какой-то старый IE чтобы шло. (уже сталкивался, что в hta не все проканывает что должно)
И второй вопрос. Цель в том, чтобы можно было создать например 100 tr1 объектов, управлять ими интервале, удалять и снова добавлять. Нельзя сделать, чтобы innerHTML был где-то прямо в объекте? Для удобства. Навроде того: var obs = []; var tr1 = { ... } obs.push(tr1 = {name: '2a'}); obs.push(tr1 = {name: '3a'}); obs.push(tr1 = {name: '4a'}); alert(obs[2].name); delete glb.obs[1]; if (obs[1]) alert(obs[1].name); |
Вроде бы вспомнил как примерно я это раньше на jquery исполнял. Но хотелось бы сделать все на яве для экономии ресурсов, потому как от 50и объектов в обработке начинаются притормаживания, может быть это бы помогло.
var glb = {}; glb.obs = []; glb.sss = 0; function getTr(prm){ var tr = { obj: $("<img src='1a.png' style='position:absolute;'>").appendTo("#pole"), x: prm.x, y: prm.y, u: prm.u, vid: 'none', liv: 20 } return tr; } var vrm = setInterval(function(){ gmm(); }, 100); function gmm(){ if (glb.sss == 5) glb.sss = 0; if (glb.sss == 0) glb.obs.push(getTr({x:100, y:200, u:1})); for(i=0;glb.obs.length>i;i++) if (glb.obs[i]) { glb.obs[i].x += 10; glb.obs[i].y += 10; glb.obs[i].u += 10; glb.obs[i].liv--; glb.obs[i].vid = 'block'; glb.obs[i].obj.css({ 'transform': 'rotate('+ glb.obs[i].u +'deg)', 'top': glb.obs[i].x +'px', 'left': glb.obs[i].y +'px', 'display': glb.obs[i].vid }); if (glb.obs[i].liv == 0) { glb.obs[i].obj.remove(); delete glb.obs[i]; } } glb.sss++; } Однако с rotate в .hta похоже будут непреодолимые сложности. А так хотелось запилить игруху чтобы с компа работала, безо всяких хостингов. Можно и так конечно html-ку запускать, но данные никакие не сохранишь. |
evgeniyfill82,
в вашем браузере нет querySelector тогда можно так childNodes pole.innerHTML = "<img src='1a.png' class='obj'>" var tr1 = { name: '1a', obj: pole.childNodes[0], x: 100, y: 200 } tr1.obj.style.top = 300 +'px'; или создавайте картинку var img = new Image(); img.src = '1a.png' img.className = 'obj'; pole.appendChild(img); var tr1 = { name: '1a', obj: img, x: 100, y: 200 } tr1.obj.style.top = 300 +'px'; |
рони,
я не совсем понимаю как именно использовать ваш пример в моем, описанном в последнем сообщении. |
evgeniyfill82,
:-? function getTr(prm){ var img = new Image(); img.src = '1a.png' img.className = 'obj'; img.style.position ='absolute' pole.appendChild(img); var tr = { obj: img, x: prm.x, y: prm.y, u: prm.u, vid: 'none', liv: 20 } return tr; } |
рони,
пардон, я ответил раньше вашего дополнения к сообщению. с дополнением да, все работает без jquery. Спасибо. var glb = {}; glb.obs = []; glb.sss = 0; function getTr(prm){ var img = new Image(); img.src = '1a.png' img.className = 'obj'; pole.appendChild(img); var tr1 = { name: '1a', obj: img, x: prm.x, y: prm.y, u: prm.u, vid: 'none', liv: 20 } return tr1; } var vrm = setInterval(function(){ gmm(); }, 100); function gmm(){ if (glb.sss == 3) glb.sss = 0; if (glb.sss == 0) glb.obs.push(getTr({x:10, y:10, u:1})); for(i=0;glb.obs.length>i;i++) if (glb.obs[i]) { glb.obs[i].x += 10; glb.obs[i].y += 10; glb.obs[i].u += 10; glb.obs[i].liv--; glb.obs[i].vid = 'block'; glb.obs[i].obj.style.top = glb.obs[i].x +'px'; glb.obs[i].obj.style.left = glb.obs[i].y +'px'; glb.obs[i].obj.style.display =glb.obs[i].vid; if (glb.obs[i].liv == 0) { glb.obs[i].obj.parentNode.removeChild(glb.obs[i].obj); delete glb.obs[i]; } } glb.sss++; } |
evgeniyfill82,
Object.keys возможно опять нет -- тогда for in <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <div id="pole"></div> <script> var glb = {}; glb.obs = []; glb.sss = 0; function getTr(prm){ var img = new Image(); img.src = 'http://paar.com.au/images/star95x72.png' img.className = 'obj'; img.style.position ='absolute' pole.appendChild(img); var tr = { obj: img, x: prm.x, y: prm.y, u: prm.u, vid: 'none', liv: 20, css : function(data) { Object.keys(data).forEach(function (key) { img.style[key] = data[key] }); } } return tr; } var vrm = setInterval(function(){ gmm(); }, 100); function gmm(){ if (glb.sss == 5) glb.sss = 0; if (glb.sss == 0) glb.obs.push(getTr({x:100, y:200, u:1})); for(i=0;glb.obs.length>i;i++) if (glb.obs[i]) { glb.obs[i].x += 10; glb.obs[i].y += 10; glb.obs[i].u += 10; glb.obs[i].liv--; glb.obs[i].vid = 'block'; glb.obs[i].css({ 'transform': 'rotate('+ glb.obs[i].u +'deg)', 'top': glb.obs[i].x +'px', 'left': glb.obs[i].y +'px', 'display': glb.obs[i].vid }); if (glb.obs[i].liv == 0) { glb.obs[i].obj.remove(); delete glb.obs[i]; } } glb.sss++; } </script> </body> </html> |
evgeniyfill82,
удаление не корректировал! |
Часовой пояс GMT +3, время: 15:18. |