CSS видит через иллюминатор

Question

CSS видит через иллюминатор

Я пытаюсь создать "иллюминатор" с помощью CSS. Когда я говорю, что иллюминатор, что я имею в виду, должен заставить часть экрана пережить так, Вы видите то, что находится позади иллюминатора и вот именно.

Я смог получить эффект я разыскиваемый выбиранием цвета фона тела к тому же как основной цвет, затем с помощью изображения иллюминатора, которое имело круговой градиент с белым в среднем и черным цветом цветом на краях, пока все содержание на странице было всем одинаковым цвет. Это не точно, что я хочу, потому что я хотел бы использовать цвет или что-либо позади экрана.

Я придумал это:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Test See Through Mouse</title>
    <script type="text/javascript" src="jquery-1.4.1.js"></script>
    <style type="text/css">
        * { margin: 0; padding: 0; }
        html, body { height: 100%; background-color: green; }
        #cover { height: 100%; width: 100%; top: 0; position: fixed; background: url(porthole.png) no-repeat; }
    </style>
</head>
<body>
    Hi, I am behind the scenes content.  Hi, I am behind the scenes content.  Hi, I am behind the scenes content.
    <!-- repeated enough times to fill the screen with text -->

    <div id="cover"></div>
    <script type="text/javascript">
        $('#cover').live('mousemove', function(e) {
            <!-- the image is 3000px by 3000px and I want the center of the visible part where the mouse is -->
            $('#cover').css('background-position', (e.pageX - 1500) + 'px ' + (e.pageY - 1500) + 'px');
        });
    </script>
</body>
</html>

где изображение иллюминатора является огромным изображением PNG (многократно размер моего экрана в каждом направлении) с маленьким кругом (приблизительно 200 пкс на 200 пкс) невидимости в середине. Это действительно дает эффект, который я хочу, но основная проблема, я не знаю размер экрана пользователя, но я также не хочу использовать изображение, которое является слишком большим для пользователя, потому что перемещение его становится заметно более изменчивым, когда размер изображения растет.

Существует ли способ сделать его так, чтобы я только предоставил изображение иллюминатора, которое является размером фактического графического иллюминатора вместо этого, с помощью некоторого другого метода для сокрытия остальной части экрана? Я готов использовать HTML (5, в порядке), CSS и JavaScript только.

5

javascript html css

задан Nick Larsen 10 February 2010 в 18:40

2 ответа

Если создать несколько

панелей и расположить их таким образом, чтобы получилось 3 ряда.

Первый ряд имеет div на всю ширину, второй ряд имеет шаблон div, изображение, div. В третьем ряду снова один div на всю ширину. Концептуально:

<--------

--------->

изображение иллюминатора

<--------

--------->

Сделайте div непрозрачными и подберите цвет изображения иллюминатора.

0

ответ дан 15 December 2019 в 06:25

Другие вопросы по тегам:

javascript html css

Похожие вопросы:

score 3 · Accepted Answer

Почему бы не использовать изображение иллюминатора размером 250x250, а затем окружить его блоками того же цвета? Все они могут быть дочерними элементами родительского div, который перемещается.

Таким образом, ваше изображение не должно быть огромным, и вы можете автоматически настроить любой размер экрана. Родительский div будет иметь ширину / высоту 200%, или, если вы хотите пофантазировать, вы можете просто установить высоту / ширину 100% и использовать некоторую причудливую математику в JS для динамического изменения размера div при перемещении порта.

================
|     div      |
================
|div| port |div|
================
|     div      |
================