jquery点赞效果

最新推荐文章于 2022-04-05 18:06:36 发布

weixin_34310785

最新推荐文章于 2022-04-05 18:06:36 发布

阅读量244

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/kitty0107/blog/1633076

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
   <style type="text/css">
   input{
       width: 200px;
       height: 50px;
       background: bisque;
       color: #fff;
       font-size: 20px;
       font-weight: bold;
       position: absolute;
       bottom: 100px;
       left: 50%;
   }
   img{
       width: 20px;
       height: 20px;
       position: absolute;
       bottom: 100px;
       left: 50%;
       margin-left: -10px;

}

   </style>
   <script type="text/javascript">
   $(function(){
       //1.找到按钮添加事件
       $("#btn").click(function(){
       //2.生成彩色的心(难点：随机生成不同颜色的心)
       var num=Math.floor(Math.random()*3+1);
       var index=$("#content").children("img").length;//0

       //3.把生成好的彩色的心追加到页面上
       $('#content').append("<img src=''/>");
       $("img:eq("+index+")").attr("src","xin/"+num+".png");

       //4.让彩色的心动起来(怎么心随心所欲的动起来)
       //随机位置
       var rand=parseInt(Math.random()*900);
       $("img").animate({
           bottom:"800px",
           opacity:"0",
           left:rand