|
Сообщение от dmitriymar
|
архитектура -нет
говнокод -да
базовые оптимизации -нет
|
Вот как раз это мне и было интересно, только я не додумался так спросить). Самому очень трудно понять правильно сделал или нет, особенно когда есть много вариантов и все вроде бы работают так как планировал. Может вы мне каких нибудь задач или упражнений дадите на развитие понимания архитектуры приложений.
А то вот например с объектами: вроде и понимаю как они устроены, как прототипное наследование осуществляется и тд и тп, а как правильно и куда лучше их применить, а куда нет не знаю.
|
Сообщение от dmitriymar
|
собрал бы всё в модуль
накинул бы наблюдатель ,и при заходе на изображение помеченное, классом , атрибутом ... включал бы лупу
а не создавал бы явно для каждого изображения объект
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Прикольный виджет</title>
<style type="text/css">
.lupe {
border: gray 4px solid;
width: 200px;
height: 200px;
position: absolute;
background-repeat: no-repeat;
background-color: white;
border-radius: 200px;
}
</style>
</head>
<body>
<img id="image" class="lup" src="http://4.bp.blogspot.com/-PaPJ6ulqi9c/Tf1-QMenB1I/AAAAAAAAADs/U_31Ap2LIjA/s1600/novye-interesnye-fotografii-ot-national-geographic-4.jpg" alt="" width="400">
<img id="image2" class="lup" src="http://2.bp.blogspot.com/-Edrn-TiDZlw/UPha3ogDR1I/AAAAAAAAA9s/esDb0tWcCdA/s1600/DSC06442.JPG" alt="" width="400">
<script type="text/javascript">
(function (cls) {
var handl = {
mouseover: function (obj) {
lupe.className = 'lupe';
document.getElementsByTagName('body')[0].appendChild(lupe);
lupe.style.backgroundImage = 'url(' + obj.src + ')';
var coords = obj.getBoundingClientRect();
top = coords.top * 4 + 100;
left = coords.left * 4 + 100;
},
mouseout: function () {
lupe.parentNode.removeChild(lupe);
},
mousemove: function (e) {
if(time.count){
return;
}
time.count = true;
time.out = setTimeout(function() {
time.count = false;
}, 50);
var event = e || window.event,
eX = event.x || event.clientX,
eY = event.y || event.clientY,
y = -eY*4 + top + 'px',
x = -eX*4 + left + 'px';
lupe.style.top = 10 + eY + 'px';
lupe.style.left = 10 + eX + 'px';
lupe.style.backgroundPosition = x + ' ' + y;
}
};
var lupe = document.createElement('div'),
elements = document.getElementsByClassName(cls),
time = {
count: false
},
top,
left;
for(var i = 0; i < elements.length; i++) {
elements[i].onmouseover = function () {handl.mouseover(this)};
elements[i].onmouseout = function () {handl.mouseout()};
elements[i].onmousemove = function (e) {handl.mousemove(e)};
}
})('lup');
</script>
</body>
</html>
Вторая работа над ошибками.