jQuery는 플러그인 Lavalamp를 사용하여 탐색 bar_jquery를 동적으로 아름답게 만듭니다.

내비게이션 바의 동적 표시 효과를 얻으려면 플러그인 Lavalamp를 사용하십시오. 이전에는 animate를 사용하여 구현했지만 효과가 그다지 좋지 않았습니다.

코드 복사 코드는 다음과 같습니다.

.nav {
너비:650px
float:왼쪽;
위치: 상대;
.nav li {
너비:자동
라인 높이:100px; 패딩:0 15px; 여백:0 10px 0 0;
글꼴 크기:14px;
float:왼쪽; >}
.nav li.back {
배경:
-moz-border-radius:
-webkit-border-radius:
줄 높이: 2;
너비: 40px;
높이: 100px; /*----*/
z-색인: /*----*/
위치: 절대; /*----*/
margin-top: 0px;
margin-left:5px;
}
.nav li a {
color: #000; z-색인: 2; /*----*/
글꼴-대문자;
텍스트 장식: 없음
위치: 상대; /
여백: 자동 10px;}



헤더 -->

"logo">

• 개인용


• 소형 및 중형 버전
• 엔터프라이즈판


• 서비스 및 가격


• 회사 소개

a href="" class="icon_login ">등록

< body>




//// ------lavalamp.js 파일 수정------------ -




코드 복사


코드는 다음과 같습니다.

(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "선형", 속도: 500, 클릭: function( ){} }, o || {});


return this.each(function() {
var me = $(this),
noop = function(el) {

},
$back = $('

') .appendTo(me),
$li = $("li", this),
curr = $("li.current", this)[0] || $($li[0]). addClass("현재")[0];


$li.not(".back").hover(function() { move(this);});
$(".nav li:eq(0) a").css("color","#FFF")
function setCurr(el) {alert(el.offsetWidth)
$ back.css({ "왼쪽": el.offsetLeft "px", "width": el.offsetWidth "px" })
curr = el

function move(el) {
$back.each(function() {
$.dequeue(this, "fx"); }
).animate({
width: el.offsetWidth- 40,
왼쪽: el.offsetLeft
}, o.speed, o.fx,function(){
var a0=$(".nav li:eq(0) a"); >var a1=$(".nav li:eq(1) a");
var a2=$(".nav li:eq(2) a")
var a3=$(". nav li:eq(3) a");
var a4=$(".nav li:eq(4) a");
var a5=$(".nav li:eq(5) a");
if(el.offsetLeft==0){
$(".nav li:eq(0) a").css("color","#FFF");
a1.css("color","#000");
a2.css("color","#000");
a3.css("color","#000");
a4.css("color","#000");
a5.css("color","#000");
}
if(el.offsetLeft==92){
$(".nav li:eq(1) a").css("color","#FFF");
a0.css("color","#000");
a2.css("color","#000");
a3.css("color","#000");
a4.css("color","#000");
a5.css("color","#000");
}
if(el.offsetLeft==194){
$(".nav li:eq(2) a").css("color","#FFF");
a1.css("color","#000");
a0.css("color","#000");
a3.css("color","#000");
a4.css("color","#000");
a5.css("color","#000");
}
if(el.offsetLeft==296){
$(".nav li:eq(3) a").css("color","#FFF");
a1.css("color","#000");
a2.css("color","#000");
a0.css("color","#000");
a4.css("color","#000");
a5.css("color","#000");
}
if(el.offsetLeft==398){
$(".nav li:eq(4) a").css("color","#FFF");
a1.css("color","#000");
a2.css("color","#000");
a3.css("color","#000");
a0.css("color","#000");
a5.css("color","#000");
}
if(el.offsetLeft==528){
$(".nav li:eq(5) a").css("color","#FFF");
a1.css("color","#000");
a2.css("color","#000");
a3.css("color","#000");
a4.css("color","#000");
a0.css("color","#000");
}
});
};


});

};
})(jQuery);


效果见http://www.uuspeed.com/

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.