zoukankan      html  css  js  c++  java
  • 仿照APP直播点赞

    公司要做直播, 所以收集一下关于直播的资料 或者其他的  今天在网上看到一个点赞效果 觉得很不错 所以学习一下 网上已经有很多这种效果了  我做这个只是想给自己记录一下

    我的这个代码来源是http://www.jb51.net/jiaoben/514139.html   下载下来后我又稍微改了一下    谢谢原作者  下面直接上代码

    <!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>

    下面是效果图

  • 相关阅读:
    STL源码剖析之_allocate函数
    PAT 1018. Public Bike Management
    PAT 1016. Phone Bills
    PAT 1012. The Best Rank
    PAT 1014. Waiting in Line
    PAT 1026. Table Tennis
    PAT 1017. Queueing at Bank
    STL源码剖析之list的sort函数实现
    吃到鸡蛋好吃,看看是哪只母鸡下的蛋:好用的Sqlite3
    cJSON
  • 原文地址:https://www.cnblogs.com/wangwei-exits/p/6347088.html
Copyright © 2011-2022 走看看