Показать сообщение отдельно
  #1 (permalink)  
Старый 10.03.2013, 10:59
Аватар для newbie7
Новичок на форуме
Отправить личное сообщение для newbie7 Посмотреть профиль Найти все сообщения от newbie7
 
Регистрация: 15.10.2012
Сообщений: 5

Оцените пожалуйста код.
Здравствуйте, уважаемые.
Недавно начал изучать 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...
Ответить с цитированием