newbie7,
Вариант...
<!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.pss = !1;
Imgt.coords;
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.coords = this.getBoundingClientRect()
};
Imgt.deleteLupe = function () {
var lupe = Imgt.lupe;
lupe.parentNode.removeChild(lupe);
};
Imgt.shower = function (e) {
if (Imgt.pss) return;
Imgt.pss = !0;
window.setTimeout(function () {
Imgt.pss = !1
}, 40)
var lupe = Imgt.lupe,
event = e || window.event,
eX = event.x || event.clientX,
eY = event.y || event.clientY,
y = -(eY - Imgt.coords.top) * 4 + 100 + 'px',
x = -(eX - Imgt.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 = new Imgt('image2');
</script>
</body>
</html>
|
Цитата:
Цитата:
<!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>
Вторая работа над ошибками. |
newbie7, на всякий случай
в тег html можно добавить run возможностях форматирования - читайте http://javascript.ru/formatting. наблюдателя можно на боди поставить и смотреть над каким элементом курсор и какой его класс. http://learn.javascript.ru/mousemove-events |
Могешь, парень)
|
| Часовой пояс GMT +3, время: 20:26. |