jQuery IE6 호 환 가능 한 페이드아웃 효과 경고 알림 기능 예제 구현

이 사례 는 jQuery 가 IE6 를 호 환 할 수 있 는 페이드아웃 효과 경고 알림 기능 을 실현 하 는 것 을 보 여 준다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
사실 경고 힌트 는 Alert 하나만 쓰 는 게 좋 을 것 같 아 요.단도직입적으로 사용자 에 게 현재 시스템 의 뜻 을 직접 알 리 는 것 이 관건 입 니 다.관건 은 Alert 라 는 것 은 다시 깨 진 브 라 우 저 를 모두 호 환 해 야 한 다 는 것 입 니 다.그렇지 않 으 면 당신 의 가장귀 가 모 브 라 우 저 를 만 드 는 것 입 니까?하지만 지금 은 알 레 르 트 가 아름 답지 않다 는 생각 이 들 고'창문 이 무섭다'는 생각 이 들 기 시 작 했 기 때문에 예 쁘 게 해 야 한 다 는 경고 가 나 왔 다.자 바스 크 립 트 의 투명도 조작 이 비교적 어 려 운 전제 에서 jQuery 의 간단 한 페이드아웃 효 과 는 당신 의 선택 입 니 다.jQuery 를 선택 한 이 유 는 IE6 를 잘 호 환 할 수 있 기 때문이다.
기본 목표
입력 상자 의 입력 내용 의 문자 수가 중국어 와 영어 가 10 이상 인 경우.팝 업 경고 에 대해 구체 적 인 효 과 는 다음 과 같 습 니 다.IETest 의 IE6 환경 에서 테스트 를 통 과 했 습 니 다.

HTML 레이아웃
이것 은 div 레이아웃 을 사 용 했 습 니 다.표 레이아웃 을 사용 하지 않 았 습 니 다.구체 적 인 float 배 치 는 을 참고 할 수 있 습 니 다.여 기 는 더 이상 말 하지 않 겠 습 니 다.아주 간단 합 니 다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<title>    </title>
</head>
<body>
<div style="float:left;">  :</div><div id="errMsg" style="color:#ff0000;display:none;float:left;">  !</div>
<div style="clear:both;"></div>
<p>
<textarea onchange="errTipsAlert(this)"></textarea><br />
</p>
</body>
</html>

이것 은,이 경고 함 수 는 여러 줄 의 텍스트 상자 의 onchange 를 통 해 작 동 되 며,작 동 할 때 자신 을 그 함수 에 전달 하 는 것 을 주의 하 시기 바 랍 니 다.동시에 경고 텍스트 가 설정 되 어 있 습 니 다.처음에는 숨 어 있 었 을 뿐 입 니 다.
동시에 선두 에 서서 jquery 를 도입 하 는 것 에 주의 하 세 요.
3.jquery 스 크 립 트
'DIV+CSS 웹 페이지 제작 레이아웃 기술 학습'가 쇼(show)와 하 이 드()로 표시 되 는 것 이 아니 라 쇼()와 하 이 드()가 페 이 드 에 들 어 가 는 효과 가 없 기 때 문 입 니 다.그리고 FadeIn 과 FadeOut 은 문자 의 위치 이동 이 발생 하여 보기 좋 지 않 습 니 다.

<script>
function errTipsAlert(obj){
 //obj        ,              10  
 if(obj.value.length>10){
  //        errMsg     1       0  1,    1       1  0,      ,             。
  $("#errMsg").fadeTo(1000,1).fadeTo(1000,0).fadeTo(1000,1);
  //            ,  
  $(obj).css("border","2px solid #ff0000");
 }
 else{
  //        errMsg  1        0,   hide()  ,  hide()           。
  $("#errMsg").fadeTo(1,0);
  //          
  $(obj).css("border","1px solid #cccccc");
 }
}
</script>

여러 줄 의 텍스트 상 자 는 애니메이션 을 설정 하지 마 세 요.'JQ 를 사용 하여 가장 기본 적 인 페이드아웃 효 과 를 작성 합 니 다.'처럼 borderwidth 속성 에 애니메이션 을 설정 할 수 있 지만 이 애니메이션 은 매우 렉 걸 립 니 다.그 러 니 그 러 지 않 는 것 이 좋다.
jQuery 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 jQuery 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기