仿照APP直播點贊

時間 2019-11-12

標籤仿照 app 直播简体版

原文原文鏈接

公司要作直播，因此收集一下關於直播的資料或者其餘的今天在網上看到一個點贊效果以爲很不錯因此學習一下網上已經有不少這種效果了我作這個只是想給本身記錄一下javascript

個人這個代碼來源是http://www.jb51.net/jiaoben/514139.html 下載下來後我又稍微改了一下謝謝原做者下面直接上代碼css

<!DOCTYPE>
<html>
<head>
    <meta charset ="utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>模仿APP直播點贊</title>
    <style type="text/css">
        .good{
            width: 100px;
            height: 30px;
            background-color: red;
            color: #fff;
            position: absolute;
            bottom: 100px;
            padding :0px;
            border-radius: 5px;
            cursor: pointer;
            outline: none;
            text-align: center;
            line-height: 30px;
            left: 50%;  
              -webkit-transform: translateX(-50%);  
              -ms-transform: translateX(-50%);  
              transform: translateX(-50%);  
        }
        img{
            width:20px;
            height: 20px;
            position: absolute;
            bottom: 110px;
            margin-left: -10px;
            left:50%;
        }
        i{
            font-style: normal;
        }

    </style>
</head>
<body>
<div class="area">
</div>
<a class="good">點贊(<i class="num">0</i>)</a>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $(".good").click(function(){
            //獲取點贊數量
            var number = $(".num").text();
            //點贊數量+1
            $(".num").text(Number(number)+1);
            var height = $(window).height();
            var width = $(window).width();
            var x = 100;
            var index = $(".area").children('img').length;
            var num = Math.floor(Math.random() * 3 + 1);
            var rand = parseInt(Math.random() * (width/2));
            $(".area").append("<img src=''>");
            $('img:eq('+index+')').attr("src","images/"+num+'.png');
            var imgItem = $(".area img:last-child");
            imgItem.stop().animate({
                bottom:height-100,
                opacity:"0",
                left:rand
            },3000,"linear",function(){
                $(this).remove();
            });
        })
    })
</script>
</body>
</html>

下面是效果圖html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。