[jquery]模仿discuz的加分提示效果
学Jquery时写的,很简单的效果.
View Css Code
1 #message
2 {
3 position: absolute;
4 z-index: 9999;
5 width: 372px;
6 height: 63px;
7 text-align: center;
8 background-image: url('../Images/message_bg.png');
9 background-repeat: no-repeat;
10 color: #FFFFFF;
11 font-size: 20px;
12 line-height: 63px;
13 }
View Js Code
1 jQuery.MessageShow = function (msg) {
2 $("<div id='message'>" + msg + "</div>").appendTo("body").hide().css("top", ($(window).height()+ $(window).scrollTop() - 63) / 2).css("left", ($(document).width() - 372) / 2).fadeIn("fast").delay(2000).fadeOut("slow", function () {
3 $(this).remove();
4 });
5 }
View Html Code
1 <html>
2 <head>
3 <!-- by minamiko -->
4 <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
5 <script src="Scripts/jquery.message.js" type="text/javascript"></script>
6 <link href="Css/jquery.message.css" rel="stylesheet" type="text/css" />
7 <script type="text/javascript">
8 $().ready(function () {
9 $(".msgshow").click(function (e) {
10 $.MessageShow("真的点啊```乖");
11 });
12 });
13 </script>
14 </head>
15 <body>
16 <a class="msgshow">点我一下</a>
17 </body>
18 </html>
打包下载:jquery.message.rar
