CSS kullanarak bir "porthole" oluşturmaya çalışıyorum. Lombar dediğimde, demek istediğim, ekranın bir kısmının görünmesini sağlamak, böylece görüntünün arkasında ne olduğunu görebilmeniz ve bunun ne olduğunu görebilmeniz.CSS port deliğinden bakın
İstenilen etkiyi, arka plan rengini ön plan rengiyle aynı olacak şekilde ayarlayarak, ortada beyaz ve kenarlarda siyah ile dairesel bir degrade olan bir porthole görüntüsü kullanarak elde edebildim. Sayfadaki tüm içerik aynı renkte olduğu sürece. Bu tam olarak istediğim şey değil çünkü ekranın arkasındaki rengi veya herhangi bir şeyi kullanmak istiyorum.
Ben bu geldi:
mazgal görüntü görünmezlik bir küçük daire (200px yaklaşık 200px) ile büyük bir PNG resmi (birden çok kez her yönde benim ekranın boyut)<!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>
ortada. Bu, benim istediğim etkiyi veriyor, ama asıl sorun, kullanıcının ekran boyutunu bilmem ama aynı zamanda kullanıcı için çok büyük bir görüntü kullanmak istemiyorum çünkü onu hareket ettirmek farkedilir bir şekilde küçük düşürücü oluyor görüntü boyutu büyüdükçe.
Bunu yapmak için bir yol var mı? Bunun yerine, yalnızca gerçek açıklıklı görselin boyutu olan bir porthole görüntüsü sağlamanın yanında, ekranın geri kalanını gizlemek için başka bir yöntem kullanmak zorunda mıyım? Ben sadece HTML (5 tamam), CSS ve javascript kullanmak için hazırım.
hehehe - bu flaşın ilk günlerinde tüm öfke eskiden olduğu gibi – meouw