Jquery 生成页面顶端的滑动弹出式提示框效果

来源：互联网发布：下载聊天软件编辑：程序博客网时间：2024/06/14 00:16

html:

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <link rel="stylesheet" href="./test.css"></head><body><div id="container">    <div id="notification">      <span id="msg"><i class="fa fa-info-circle"></i><span>系统错误，请稍后重试</span></span>      <span id="close" class="fa fa-times"></span>    </div>    <button>系统提示</button></div></body><script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script><script>$(function(){    $('button').off('click').on('click',function(){        $('#notification').animate({'top':-7});    });    $('#close').off('click').on('click',function(){        $('#notification').animate({'top':-45});    });});</script></html>

css:

/*CSS源代码*/@import url('http://cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css');button{  width: 80px;  height: 40px;  left: 50%;  top: 50%;  margin-left: -40px;  margin-top: -20px;  position: absolute;}body{    background:#CFCFCF;}#notification{  width:80%;  line-height:35px;  margin:0 auto;  background:#efb73e;  color:#fff;  font-size:12px;  position:relative;  top:-45px;}#notification #msg i{margin:0 10px;}#notification #close{position:absolute;right:10px;top:10px;cursor:pointer;}

这里写图片描述

来自这里

0 0