Здравствуйте, уважаемые.
Недавно начал изучать JS. В программировании опыта нет совершенно, поэтому некоторые вещи очень здорово перегревали мозг. Но самой большой своей проблемой я считаю отсутствие возможности пообщаться оффлайн с практикующим профессионалом, показать свой код. Поэтому обращаюсь к знающим людям этого форума. Помогите, ткните носом в неточности, возможно я что-то делаю не так как было бы правильнее.
В общем буду благодарен за любой совет.
p.s. В одной из тем нашёл ссылку на jquery плагин (
http://chrisiufer.com/loupe/), который советовали сделать на обычном JS. У меня как-бы получилось, но оценить качество кода возможности не имею. На CSS неточности просьба не обращать внимание, интересует только оценка реализации на JS.
<!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" 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" src="http://2.bp.blogspot.com/-Edrn-TiDZlw/UPha3ogDR1I/AAAAAAAAA9s/esDb0tWcCdA/s1600/DSC06442.JPG" alt="" width="400">
<script type="text/javascript">
var Imgt = function (id) {
if(!(this instanceof Imgt)) {
return new Imgt(id);
}
this.element = document.getElementById(id);
this.addEvent('mouseover', Imgt.createLupe);
this.addEvent('mouseout', Imgt.deleteLupe);
this.addEvent('mousemove', Imgt.shower);
};
Imgt.lupe = document.createElement('div');
Imgt.createLupe = function () {
var lupe = Imgt.lupe;
lupe.className = 'lupe';
document.getElementsByTagName('body')[0].appendChild(lupe);
lupe.style.backgroundImage = 'url('+ this.src + ')';
};
Imgt.deleteLupe = function () {
var lupe = Imgt.lupe;
lupe.parentNode.removeChild(lupe);
};
Imgt.shower = function (e) {
var lupe = Imgt.lupe,
event = e || window.event,
eX = event.x || event.clientX,
eY = event.y || event.clientY,
coords = this.getBoundingClientRect(),
y = -(eY - coords.top)*4+100 + 'px',
x = -(eX - coords.left)*4+100 + 'px';
lupe.style.top = 10 + eY + 'px';
lupe.style.left = 10 + eX + 'px';
lupe.style.backgroundPosition = x + ' ' + y;
};
Imgt.prototype.addEvent = function (event, handler) {
var element = this.element;
if(element.addEventListener) {
return element.addEventListener(event, handler);
}else if(element.attachEvent) {
return element.attachEvent('on' + event, handler);
}
};
var i = new Imgt('image');
var i2 = Imgt('image2');
</script>
</body>
</html>
Буду также признателен за советы из области как отрастить скил в JS...