Показать сообщение отдельно
  #5 (permalink)  
Старый 22.04.2016, 12:59
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Blondinka,
Вот ваша девушка, правда, не с ноутбуком, с рамочкой... из того, что под руку попало. Короче говоря, просто нужна подходящая картинка - покрал ноутбук из первоисточника
<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
    <style>
        body
        {
            background: url(http://parallel.ua/f/1/white_grl.jpg) 0 0 no-repeat;
            min-width: 750px;
            min-height: 760px;
        }
        #x-ray 
        {  background: url(http://h-xtech.com/css/laptop-transparent.png) 0 0 no-repeat;
           background-size:100%;
           position: absolute;
            width: 280px;
            height: 200px;
            }
        #screen
        {
            background: url(http://parallel.ua/f/1/black_grl.jpg) 0 0 no-repeat;
            position: relative;
            top:10px;
            left:40px;
            width: 200px;
            height: 130px;
        }
    </style>
    <script>
        document.onmousemove = function (evt) {
            var e = evt || window.event, div = document.getElementById('x-ray');
            var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft, scrollY = document.documentElement.scrollTop || document.body.scrollTop
            var x = e.clientX + scrollX - 80, y = e.clientY + scrollY - 80;
            div.style.left = x + 'px';
            div.style.top = y + 'px';
            x = x + 40; y = y + 10;
            document.getElementById('screen').style.backgroundPosition = '' + -x + 'px ' + -y + 'px';
        }
    </script>
</head>
<body>

    <div id="x-ray">
      <div id="screen"></div>
    </div>
</body>
</html>

Последний раз редактировалось Dilettante_Pro, 22.04.2016 в 14:15.
Ответить с цитированием