投稿

jQuery:LavaLamp

lavalamp

LavaLampと書いてもピンときませんよね。
グローバル・ナビゲーションで、マウスをもっていくと、ビヨーンと背景ブロックが追っかけてくるやつです。
こう書いてもきっとわかりませんね。
 
lavalamp1
こんなやつです。使い方。
頭で指定しておくのはお決まり。ULにメニューを書いていきます。
下の例は、ULの背景にメニュー画像を置いて、その上を透過パネル(少し斜がかかったもの)が移動するようにしたものです。
メニュー画像を載せられればわかりやすいんだけど、今制作中のお客様のやつなんでね。
[code]

<script type="text/javascript" src="/js/jquery.lavalamp.js”>
<script type="text/javascript" src="/js/jquery.easing.1.1.js”>

jQuery(function($) {
$(“#nav1”).lavaLamp(
{
fx: “backout”,
speed: 700
}
);
});

[/code]
[code]

[/code]
[code]
.lavaLampNoImage {
background:#fff url(images/top-menu.png) no-repeat;
width: 898px;
height: 78px;
position: relative;
overflow: hidden;
padding:1px;
margin: 0;
border: none;
}
.lavaLampNoImage li {
margin:0;
padding:0;
float: left;
list-style: none;
}
.lavaLampNoImage li.back {
position: absolute;
z-index: 8;
height: 76px;
background-color:#fff;
opacity:0.2;
filter:alpha(opacity=20);
-ms-filter:”alpha( opacity=20 )”;
}
.lavaLampNoImage li a {
position: relative;
z-index:10;
display:block;
overflow: hidden;
float: left;
height: 76px;
font-size:8px;
color:#C1955C !important;
text-decoration:none;
}
.lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
border:none;
}
#nav1l1, #nav1l1 a { width:152px; }
#nav1l2, #nav1l2 a { width:197px; margin-left:2px; }
#nav1l5, #nav1l5 a { width:121px; margin-left:2px; }
#nav1l6, #nav1l6 a { width:123px; margin-left:2px; }
[/code]