배경 이미지를 사용하는 Jquery MagicLine?

최상위 수준 항목 만있는 기본 탐색 기능이 있습니다. 방문중인 현재 페이지에 추가되는 대형 배경 이미지 (탐색은 100px, bg 이미지는 200px입니다)가 있습니다.배경 이미지를 사용하는 Jquery MagicLine?

<ul> 
    <li class="current-menu-item"><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    <li><a href="#">Link 4</a></li> 
    <li><a href="#">Link 5</a></li> 
</ul>

나는 jQuery MagicLine의 동작을 모방하지만 내 배경 이미지를 사용하고 다른 탐색 링크를 통해 사용자가 마우스를 올리면 같은 항목으로 항목에서 이동 가질 수있을 싶어요.

jQuery에서이 작업을 수행 할 수 있습니까? CSS3?

출처

2013-08-17 javy

그래서 마우스를 가리키면 배경 이미지가 링크 뒤에서 앞뒤로 움직이게할까요? 링크가 동일한 너비와 bg 이미지입니까? –

정확하게. 나는 그것들을 같은 폭으로 만들 수있다. bg 이미지는 항상 동일합니다. – javy

그래, 완벽한 크로스 브라우저 지원이 필요합니까? CSS 전환으로이 작업을 시도하는 것은 흥미로울 것입니다. 그러나 최신 브라우저 만 지원합니다. 그렇지 않으면 jQuery와 함께 사용할 수 있습니다. –

내가 여기 솔루션을 게시 한 : 그것은 실제로, 곤란하게 간단 http://www.nextdesigns.ca/magicline/index.html

합니다. 결국에는 CSS를 약간만 들여다 볼 필요가있었습니다.

CSS에서 몇 가지 항목을 업데이트했습니다.

#example-one li { 
    display: inline-block; 
    width:100px; //NEW 
}

는 다음, MagicLine, 나는 크기와 배경 속성을 업데이트 :

#magic-line { 
    position: absolute; 
    bottom: -2px; 
    left: 0; 
    width: 100px; //NEW 
    height: 50px; //NEW 
    background: #fff url(bg.png); //NEW 
    z-index:-1; 
}

내가 옆에 CSS에 bg.png 튀어 나는 논의 된 바와 같이, 여기에 정적 폭을 추가했다. 칙칙한 배경을 가진 단순한 이미지입니다. 100px x 50px 이미지로 교환 할 수 있습니다. 그것이 도움이된다면 대답으로 표시하십시오.

출처

2013-08-18 00:41:51

배경 이미지를 사용하는 Jquery MagicLine?

답변

관련 문제