zoukankan      html  css  js  c++  java
  • [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

  • 相关阅读:
    构建git+gerrit+repo的Android代码服务器
    简单学习:repo入门
    git checkout 命令详解
    python学习第一天
    window下的git工具msysgit的使用
    git基本操作
    echarts 使用示例
    管道命令
    jquery修改文档结构
    JavaScript正则表达式
  • 原文地址:https://www.cnblogs.com/minamiko/p/2306893.html
Copyright © 2011-2022 走看看