JQUERY 배경 그림 그 라 데 이 션 실현 (페 이 드 아웃) (회전)
2 하나, 2010
in jquery
일반적인 CSS Hover 는 배경 그림 을 최대한 많이 바 꿔 서 보기 좋 지 않 습 니 다. jquery 를 이용 하여 페 이 드 효 과 를 더 해 드 리 겠 습 니 다.
여기 서 이 예 를 보면 제 가 연습 을 해 볼 게 요. 효 과 는 볼 수 있 을 것 같 아 요.http://dragoninteractive.com/사이트 ~, 멋있다 ~
실현 원리
두 장의 서로 다른 그림 을 통 해 두 개의 서로 다른 층 이 겹 쳐 져 있 고 꼭대기 층 은 잠시 투명 하 며 마우스 가 올 라 갈 때 꼭대기 층 은 투명 에서 불투명 으로 바 뀌 고 마 우 스 는 반대로 떠난다.
준비 작업
PS 로 그림 을 만 듭 니 다 ~ 아래 그림 은 높이 가 얼마 인지 기억 하 세 요.나의 이 그림 의 높이 는 두 개의 40px 그림 이다.
다음은 코드 html 구조:
1
<a id="logo" href="http://fatkun.com"><span>fatkun.com</span></a>css 코드:
#logo{
margin:0 auto;
position:relative;/* , hover */
background:url(fatkun.png) left top no-repeat;/* */
width:150px;
height:40px;/* */
display:block;
text-indent:-9999px;
}
#logo .hover{/* JQ */
background:url(fatkun.png) left bottom no-repeat;/*background-position */
position:absolute;/* */
top:0;
left:0;
height:40px;
width:150px;
}마지막 으로 가장 중요 한 JQuery 코드 가 나 왔 습 니 다.
<script type="text/javascript">
$("#logo").append("");//
$(".hover").css('opacity', 0);//
$(".hover").parent().hover(
function(){
$(".hover").stop().animate({opacity: '1'},1000);
},
function(){
$(".hover").stop().animate({opacity: '0'},1000);
});
script> 다음으로 전송:https://www.cnblogs.com/vingi/articles/1712451.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
