Nic*_*sen 5 html javascript 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图像(每个方向上我的屏幕大小的倍数),中间有一个小圆圈(大约200px乘200px)的隐形.这确实给了我想要的效果,但主要的问题是我不知道用户的屏幕尺寸,但我也不想使用对用户来说太大的图像,因为移动它会明显变得更加笨拙随着图像尺寸的增长.
有没有办法让它只需要提供一个与实际舷窗图形大小相当的舷窗图像,使用其他方法来掩盖屏幕的其余部分？我愿意使用HTML(5个没关系),CSS和javascript.
为什么不使用 250x250 的舷窗图像，然后用相同颜色的 div 包围它？它们都可能是移动的父级 div 的子级。
这样，您的图像不必很大，并且可以自动调整到任何屏幕尺寸。父 div 的宽度/高度将为 200%，或者如果您想要更奇特，您可以简单地将高度/宽度设置为 100%，并在 JS 中使用一些奇特的数学来随着端口移动动态调整 div 的大小。
================
| div |
================
|div| port |div|
================
| div |
================