Próbuję utworzyć "iluminator" przy użyciu CSS. Kiedy mówię "iluminator", mam na myśli, żeby część ekranu była widoczna, żebyś mógł zobaczyć, co znajduje się za iluminatorem i to wszystko.CSS zobacz przez iluminator
Udało mi się uzyskać pożądany efekt, ustawiając kolor tła ciała na taki sam, jak kolor pierwszego planu, a następnie używając obrazu iluminatora, który miał okrągły gradient z białą pośrodku i czarną na krawędziach jako o ile cała treść na stronie była tego samego koloru. Nie jest to dokładnie to, czego chcę, ponieważ chciałbym użyć koloru lub czegoś za ekranem.
wymyśliłem to:
<!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>
gdzie obraz iluminator jest ogromny PNG (kilka razy większy od mojego ekranu w każdym kierunku) z małym okręgu (o 200px przez 200px) niewidzialności pośrodku. To daje pożądany efekt, ale głównym problemem jest to, że nie znam rozmiaru ekranu użytkownika, ale nie chcę też używać obrazu, który jest zbyt duży dla użytkownika, ponieważ poruszanie nim staje się zauważalnie bardziej przenikliwe wraz ze wzrostem rozmiaru obrazu.
Czy jest jakiś sposób, aby to zrobić, aby zamiast tego podać tylko iluminator, który jest wielkości rzeczywistej iluminatora, używając innej metody, aby ukryć resztę ekranu? Jestem skłonny używać HTML (5 jest ok), tylko CSS i javascript.
hehehe - kiedyś była wściekłość we wczesnych dniach flashowania – meouw