jquery_jquery를 기반으로 아름다운 동적 정보 프롬프트 효과 구현

간단하고 아름다운 애니메이션 효과, 좋은 사용자 경험!

이 효과는 페이지 상단에 나타납니다. x 프롬프트가 있으면 수동으로 닫아야 합니다.

알림: jquery 1.6.2 버전을 기반으로 합니다!

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

;

호출 방법:

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

> ;

jquery 버전:

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

/*!
* jQuery JavaScript SysMsg v1.0
* http://zengxiangzhan.cnblogs.com/
* jQuery.sysmsg.js
* 저작권 2011, Zeng Xiangzhan
* 날짜: 2011-8-1 20:00 2011 -2210
*/
if (!window.ZENG) var ZENG =
ZENG.add = function (d, f) {
var j
if ($.isFunction(f.init)) {
j = f.init
delete f.init; (true, j.prototype, f);
this[d] = j
} else this[d] = f
}; ZENG.add("SysMsg", function() {
function d(u , D, v) {
D || (D = "성공")
v = v || D == "오류"

h.push( function() {
d(u, D)
})
f()
} else {
m.html(u); >i.removeClass().addClass(D).show().animate({
top: 0
}, 200, function() {
v || j()
}) ;
o = 1
}
}
function f() {
i.animate({
top: "-50px"
}, 200, function() {
i.hide ();
o = 0;
h.length && h.shift()()
})
}
function j() {
setTimeout(function() {
f()
}, 2E3)
}
var o, h = [],
i = $("#message-dock"),
m = i.find("#message-text");
$(".dismiss", "#message-dock").live("click", function(u) {
f ();
u .preventDefault()
});
return {
show: d
}
}())


style

코드 복사

코드는 다음과 같습니다.

.group {
디스플레이: 블록;
}
.group:after {
clear: 둘 다;
내용: ".";
디스플레이: 블록;
높이: 0;
가시성: 숨김;
}
.group {
최소 높이: 1%;
}
* html .group {
높이: 1%;
}
html, body, div,p{
배경: 없음 반복 스크롤 0 0 투명;
경계: 0 없음;
글꼴 크기: 100%;
여백: 0;
개요: 0 없음;
수직 정렬: 기준선;
}
본문 {
색상: #444444;
글꼴 계열: "Helvetica Neue",Helvetica,Arial,sans-serif;
글꼴 크기: 75%;
줄 높이: 1;
}
#message-dock {
배경색: #164673;
색상: #FFFFFF;
줄 높이: 1.75em;
패딩: 10px;
위치: 고정;
상단: -60px;
너비: 100%;
z-색인: 9999;
}
#message-dock a {
색상: #FFFFFF;
글꼴 두께: 굵게;
텍스트 장식: 밑줄;
}
#message-dock p {
border-radius: 5px 5px 5px 5px;
플로트: 왼쪽;
패딩: 5px 6px;
}
#message-dock .dismiss {
background: url("msg.png") 반복 스크롤 -67px -180px #A12A2A;
테두리 반경: 0 5px 5px 0;
디스플레이: 없음;
플로트: 왼쪽;
높이: 21px;
왼쪽 여백: 10px;
텍스트 들여쓰기: -999999px;
너비: 20px;
커서: 포인터;
}
.sprite {
background: url("msg.png") 반복 없음 스크롤 0 0 transparent;
디스플레이: 인라인 블록;
수직 정렬: 상단;
}
#message-sleeve {
여백: 0 자동;
최대 너비: 1200px;
최소 너비: 1000px;
}
.fixed #message-sleeve {
너비: 1000px;
}
#message-text {
float: 왼쪽;
글꼴 크기: 1.16667em;
패딩: 0 10px 0 0;
}
.success p {
배경색: #7AA13D;
}
.alert p {
배경색: #FFF095;
색상: #333333;
}
.alert a {
색상: #333333 !important;
}
.error p {
배경색: #A12A2A;
패딩 오른쪽: 0 !중요;
}
.error #message-text {
padding-right: 0;
}
.error .dismiss {
display: block !important;
}
.error .message-icon, .alert .message-icon {
배경 위치: 0 -249px;
}
.message-icon {
배경 위치: -21px -249px;
플로트: 왼쪽;
높이: 21px;
여백 오른쪽: 6px;
위치: 친척;
너비: 21px;
}

附件：

完毕!