zoukankan      html  css  js  c++  java
  • 点击后弹出,几秒后自动消失

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>提示已点赞 之后消失</title>
       <script type="text/javascript" src="http://ku.suoshipai.cn/static/home/js/jquery-2.0.3.js"></script>
       <style type="text/css">
          #dianji{text-align: center ;font-size: 30px;color:#000;display: block;cursor: pointer}
    
    
          #disappare{border:2px solid #ccc;border-radius: 5px;background: #fff;font-size: 20px;text-align: center;
            position: fixed;top:50%;left: 48%;
          }
          #disappare span{
             padding: 10px;
          }
       </style>
    </head>
    <body>
    <div id="content">
       <a id="dianji">点击</a>
       <div id="disappare" style="display:none;">
          <span>已点赞</span>
       </div>
    </div>
    <script type="text/javascript">
       $(function(){
          $("#dianji").click(function(){
             $("#disappare").show().delay(3000).hide(50);
          });
       })
    </script>
    </body>
    </html>
    <!--http://blog.csdn.net/u013630488/article/details/49498311-->

     效果图:

  • 相关阅读:
    第十二周学习进度条
    寻找水王
    第十一周进度条
    第十周进度条
    构建之法阅读笔记(二)
    第九周学习进度
    团队名字
    站立会议09
    站立会议08
    站立会议07
  • 原文地址:https://www.cnblogs.com/heyiming/p/7007283.html
Copyright © 2011-2022 走看看