CSS를 사용하여 탐색 텍스트 설정, 밑줄, 배경색 또는 변위와 같은 일반적인 탐색 효과에는 누구나 익숙합니다. 이전 게시물에서 일부 네티즌들이 http://www.tonta.com.cn/ 웹사이트를 언급했는데, 홈페이지의 탐색 효과가 좋은 것으로 나타났습니다. 플래시는 그다지 눈부신 효과는 없지만 상대적으로 좋습니다. 섬세하고 매우 편안해 보입니다.
나는 할 일이 없으며 dw에서 동일한 탐색 효과를 얻으려고 노력합니다. 효과는 다음과 같습니다: http://vip.5d.cn/flood/daohang/1.htm .
먼저 마우스가 넘어가면 배경이 바뀌고 작은 이미지가 회전하는 효과의 구성을 분석합니다. 좋아요! dw에서 스왑 이미지(플립 이미지) + 배경 이미지 변경(CSS 정의)을 사용하는 것이 좋습니다. 이렇게 하면 효과를 얻을 수 있습니다.
4개의 gif 이미지를 준비하세요:
마우스가 지나갈 때의 배경 이미지(FW에서는 Nimate에서 쉽게 그라데이션 효과를 얻을 수 있습니다. 이 이미지의 투명도는 0%에서 100%까지 점차적으로 변경됩니다.)
[img]/conimages/web/2003-06/bg0604.gif[/img]
마우스를 펼쳤을 때의 배경 이미지 (이 이미지의 투명도는 100%에서 0%로 점차 변화합니다)
[img]/conimages/web/2003-06/b0604.gif[/img]
역동적인 작은 이미지
[img]/conimages/web/2003-06/20604.gif[/img]
작은 정지 이미지(fw에서 이미지 형식을 gif로 설정하고 저장)
[img]/conimages/web/2003-06/2a0604.gif[/img]
1. 배경 효과는 CSS를 사용하여 두 가지 클래스를 정의하여 구현됩니다.
.style1 { background-image: url(bg.gif)}
.style2 {배경-이미지: url(b.gif)}은
마우스가 지나갈 때와 마우스를 끌어낼 때 배경 이미지로 사용됩니다. 그런 다음 셀에 다음 코드를 추가합니다.
onmouseover="this.className=' 스타일1'"
onmouseout="this.className='style2'" 는
마우스가 지나갈 때 나타나고 마우스가 멀어지면 배경 그라데이션이 사라지는 효과를 얻을 수 있습니다.
2. 이미지 뒤집기 효과를 사용하면 작은 정적 이미지를 셀에 삽입하고 동작을 사용하여 이미지 교체 효과를 추가하고 마우스가 해당 이미지 위로 지나간 후 동적 작은 이미지로 뒤집히도록 설정할 수 있습니다.
더 가까운 효과를 얻으려면 이미지 뒤집기 효과를 셀에 적용하고 정적 작은 이미지 코드에서 다음 코드를 잘라야 합니다.
onMouseOver="MM_swapImage('Image2','','2.GIF', 1)"
onMouseOut="MM_swapImgRestore()"는
셀 코드 td 태그에 붙여넣어집니다.
마우스가 셀 위로 지나갈 때 이미지 반전을 달성하여 동적 효과를 생성할 수 있습니다.
이 시점에서 모든 효과를 얻을 수 있습니다.
이 예에서 dw를 사용하여 얻은 효과는 플래시에서 생성된 효과와 거의 비슷하거나 더 좋습니다(마우스가 셀을 그릴 때 배경 그라데이션이 사라지는 효과를 얻었습니다).
부분:
1. fw에서 그라데이션 배경 이미지를 조심스럽게 만들기(저는 그냥 무작위로 그라데이션 이미지 두 개를 만들었습니다) + 탐색 셀을 수정하면 효과가 더 섬세하고 탁월해집니다.
2. 이 방법을 사용하여 탐색 효과를 만드는 경우 여러 셀을 사용해야 합니다. 코드를 복사한 후에는
onMouseOver="MM_swapImage('Image3','',')라는
두 가지 코드를 수정해야 합니다.2.GIF',1)"
<img src="2a.gif" name="Image3" width="15" height="15" border="0" id="Image3">
플립 이미지의 이름을 다른 값으로 수정하면 됩니다.
3． 이 예제의 기술적인 내용은 그리 높지 않습니다. 그리고 저는 플래시에 대해 잘 알지 못하기 때문에 dw와 플래시 중 어느 것이 더 사용하기 쉬운지는 모르겠습니다. 그러나 여기서는 플래시에 대한 방법을 제공하기 위해 언급합니다. 문제를 해결하세요.
4. 두 가지 간단한 효과를 중첩하면 더 멋진 효과를 만들 수 있습니다. 한 가지 더 강조할 점은 애니메이션 배경 이미지를 만들 때 효과를 얻으려면 gif 애니메이션의 반복을 없음으로 설정해야 한다는 것입니다. 루핑(루핑이 아님)
:)