javascript实现的一个小效果

亦凉 2021-11-16 10:01 300阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <title>Growl</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
      
      <style type="text/css" media="screen">
        html, body {
         
          height: 100%;
          padding: 0;
          margin: 0;
        }
      
        body {
         
          font-family: Helvetica, Arial, "MS Trebuchet", sans-serif;
          color: #363636;
          -webkit-user-select: none;
          line-height: 1.2em;
          
          background: #778091;
          background: -webkit-gradient(linear, left top, left bottom, from(#778091), to(#5D6778));
          background: -moz-linear-gradient(top, #778091, #5D6778);
        }
        
        
        button {
         
          border: 1px solid #BBBBBB;
          color: #000;
          font-size: 25px;
          padding: 6px 10px;
          margin: 1px 1px 1px 0;
          outline: none;
    
          background: #F9F9F9;
          background: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#E3E3E3));
          background: -moz-linear-gradient(top, #F9F9F9, #E3E3E3);
          
          border: 1px solid #5B6065;
          margin: 20px;
          
          border-radius: 3px;
          -moz-border-radius: 3px;
          -webkit-border-radius: 3px;
                
          box-shadow: 0 1px 1px #FFF;
          -moz-box-shadow: 0 1px 1px #FFF;
          -webkit-box-shadow: 0 1px 1px #FFF;
        }
        
        button:active {
         
          background: #E3E3E3;
          background: -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#F9F9F9));
          background: -moz-linear-gradient(top, #E3E3E3, #F9F9F9);
        }
        
      </style>
      
      <style type="text/css" media="screen">
        #growl {
         
          position: absolute;
          bottom: 10px;
          right: 20px;
          overflow: hidden;
        }
    
        #growl .msg {
         
          border: 1px solid #171717;
          color: #E4E4E4;
          text-shadow: 0 -1px 1px #0A131A;
      
          font-weight: bold;
          width: 200px;
          min-height: 30px;
          padding: 10px;
          font-size: 15px;
          margin-bottom: 10px;
      
          background: #141517;
          background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), color-stop(0.8, rgba(255, 255, 255, 0))), rgba(0, 0, 0, 0.8);
      
          box-shadow: inset 0 1px 1px #8E8E8E;
          -webkit-box-shadow: inset 0 1px 1px #8E8E8E;
          -moz-box-shadow: inset 0 1px 1px #8E8E8E;
      
          border-radius: 7px;
          -webkit-border-radius: 7px;
          -moz-border-radius: 7px;
        }
      </style>
      
      <script type="text/javascript" charset="utf-8">
       (function($){
        var container = $("<div />");
        container.attr({id:"growl"});
        $(function(){$("body").append(container)});
        $.growl = function(body){
            var msg = $("<div />").addClass("msg");
            msg.html(body);
            container.append(msg);
            msg.show("drop",{direction:"down",distance:100},300)
            .delay(4000)
            .fadeOut(300,function(){$(this).remove();});
            return msg;
        }
    })(jQuery);
      
    
    var notices = ["Do you know me?", "haha,I will never tell you!", "I can tell you that....", "There's no pleasing some people", "That's it - I'm on strike!"];
        var lorum = "Stay hungry,stay foolish!";
      
        jQuery(function($){
          $("button").click(function(){
            $.growl(notices.shift() || lorum);
          })
        })
      
      </script>
    </head>
    
    <body>
      
      <button>Click me!</button>
    </body>
    </html>

![26220211-72bcbe711a6f48af9ae834b51414cc99.jpg][]

转载于:https://www.cnblogs.com/joyho/articles/3045874.html

[26220211-72bcbe711a6f48af9ae834b51414cc99.jpg]: /images/20211116/db09382c71e74d2db8150053c6779c37.png