Ying Caiyi의 js 에세이(js 그림 전환 효과)_이미지 특수 효과

파트너 페이지 효과는 사진에 마우스를 올리면 색상이 바뀌는 현상인데 원래는 단순한 색상 변경 효과인데, 문제는 사진의 높이와 너비가 같은 크기가 아니라는 점입니다.

이게 더 귀찮네요. 배경에 그림을 넣으려면 그림 외부의 컨테이너를 하나씩 정의해야 하는데, 캐스케이딩 스타일을 많이 작성해야 하는데 너무 번거로워서 결국 그림 높이를 절반으로 결정했습니다. , 이미지의 너비는 그 외부의 컨테이너에 할당됩니다

그런 다음 이미지는 다음과 같이 처리되었습니다.

사진 위로 마우스를 이동하면 위로 30픽셀 이동한 후 다시 원래 위치로 이동합니다.
html 코드는 다음과 같습니다.

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

파트너

img src=" auto_navi/images/samsung_icon3.png"/> < a href=" #">

<--partner_box end-->