>  기사  >  웹 프론트엔드  >  Form JS 팝업 프롬프트 효과 code_form 효과

Form JS 팝업 프롬프트 효과 code_form 효과

WBOY
WBOY원래의
2016-05-16 18:07:341094검색

HTML

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





; /form>

페이지 스타일

Key JS




코드 복사


코드는 다음과 같습니다.


$(function() {
$(".input ,.login_input,.textarea").focus(function() {
$(this).addClass("focus");
}).blur(function() {
$(this).removeClass("focus");
});
//입력 상자 프롬프트, HintTitle, HintInfo 속성을 사용하여 객체 가져오기 $("[HintTitle],[HintInfo] ").focus(function( event) { $("*").stop(); //실행 중인 모든 애니메이션을 중지합니다$("#HintMsg").remove(); //먼저 지우고 반복되는 오류 방지var HintHtml = "
  • " $(this).attr("HintTitle") "" $(this).attr("HintInfo") "
"; //표시된 내용 설정
var offset = $(this).offset(); //이벤트 객체의 위치 가져오기
$("body").append(HintHtml ); //노드 추가
$("#HintMsg").fadeTo(0, 0.85); //객체의 투명도
var HintHeight = $("#HintMsg").height(); 컨테이너 높이 가져오기
$( "#HintMsg").css({ "top": offset.top - HintHeight "px", "left": offset.left "px" }).fadeIn(500)
}).blur(function( event) {
$("#HintMsg").remove(); //UL 삭제
})



렌더링:




위 내용은 다운로드 사이트에서 가져온 내용으로 구체적인 이름은 잊어버렸습니다.... 참고용으로만 사용하세요

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:Javascript 기술을 공유할 수 있는 25가지 재미있는 JavaScript 게임다음 기사:Javascript 기술을 공유할 수 있는 25가지 재미있는 JavaScript 게임

관련 기사

더보기