Показать сообщение отдельно
  #11 (permalink)  
Старый 13.03.2013, 00:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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>
Ответить с цитированием