Alvaro Montoro tarafından jQuery için geliştirilmiş bir eklenti. Eklenti orta kısmı yazı olarak kesilmiş bir resmin arka planında bir akvaryum görüntüsü sağlıyor. Hareketli sular hareketli balıklar adeta 3D gibi.
Kullanım
- Head etiketleri arasına eklenecek olan bölümler.
jQuery ve eklenti url adresleri :
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.nautilus.js"></script>
Css :
<style type="text/css">
html, body {
background-color: #ccc;
}
#verne {
top: 100px;
left: 100px;
}
.sub_ctrl {
position: absolute;
}
.ctrlUp {
top:30px;
left:40px;
}
.ctrlDown {
top:60px;
left:40px;
}
.ctrlLeft {
top:45px;
left:5px;
}
.ctrlRight {
top:45px;
right:5px;
}
</style>
JavaScript :
<script type="text/javascript">
$(document).ready(function() {
$("#verne").nautilus({
controls:true,
color: '#ffffff',
controlsWidth:100,
controlsType: 'image',
controlsUp: "up.jpg",
controlsDown: "down.jpg",
controlsLeft: "left.jpg",
controlsRight: "right.jpg",
});
});
</script>
- Body etiketleri arasına eklenecek olan kısım.
Html :
<div id="verne"> <img src="alvaro.png" class="window" style="width:500px;height:200px;" /> <img src="waves2.png" class="waves" style="width:1000px;height:300px;top:40px;" /> <img src="waves1.png" class="waves" style="width:1000px;height:300px;top:30px;" /> <img src="layer1.png" style="width:700px;height:1000px;" /> <img src="layer2.png" style="width:700px;height:1000px;" /> <img src="layer3.png" style="width:700px;height:1000px;" /> <img src="layer4.png" class="moves" style="width:200px;height:150px;top:300px;" /> <img src="fondo.jpg" class="back" style="width:700px;height:1000px;"/> </div>
