点击后弹出，几秒后自动消失

最新推荐文章于 2021-06-10 16:31:12 发布

weixin_30469895

最新推荐文章于 2021-06-10 16:31:12 发布

阅读量353

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/heyiming/p/7007283.html

本文介绍了一种使用HTML、CSS及jQuery实现的点赞提示自动消失功能。通过简单的前端技术，当用户点击点赞按钮后，页面会显示已点赞提示，并在3秒后自动消失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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.youkuaiyun.com/u013630488/article/details/49498311-->