你会制作点赞吗？(含动图)

刺骨的言语ヽ痛彻心扉 2022-01-29 03:27 265阅读 0赞

像常见的QQ空间点赞、微信点赞、各种论坛和微博都会有点赞的功能，其实现也是比较容易。

用到的css处理知识如下：

*  jquary的$(‘tag’).append()
 *  setInterval()定时器
 *  css样式透明度opacity
 *  定位position
 *  字体大小、位置

旁边的数字点赞时加1，使用原生js实现。实现效果如下：  
![在这里插入图片描述][20190521163050867.gif]

## 1.页面框架html部分实现 ##

实现代码如下：

<div class="big_box">
        <div class="container">
            <p>风急天高猿啸哀，渚清沙白鸟飞回。无边落木萧萧下，不尽长江滚滚来</p>
            <p>万里悲秋常作客，百年多病独登台。艰难苦恨繁霜鬓，潦倒新停浊酒杯</p>
            <div class="item">
                <img src="img/timg.jpg">
                <span>0</span>
            </div>
        </div>
        <div class="container">
            <p>风急天高猿啸哀，渚清沙白鸟飞回。无边落木萧萧下，不尽长江滚滚来</p>
            <p>万里悲秋常作客，百年多病独登台。艰难苦恨繁霜鬓，潦倒新停浊酒杯</p>
            <div class="item">
                <img src="img/timg.jpg">
                <span>0</span>
            </div>
        </div>
        <div class="container">
            <p>风急天高猿啸哀，渚清沙白鸟飞回。无边落木萧萧下，不尽长江滚滚来</p>
            <p>万里悲秋常作客，百年多病独登台。艰难苦恨繁霜鬓，潦倒新停浊酒杯</p>
            <div class="item">
                <img src="img/timg.jpg">
                <span>0</span>
            </div>
        </div>
    </div>

一个class为big\_box的大盒子下面包含3个class为container的小盒子，这里每个小盒子中仅仅使用了p标签和一张图片，制作比较简易。

## 2.点击拇指按钮旁边数字加1实现 ##

使用jquary实现了加法算法。遍历class为item的标签，获取到当前item下span标签后点击拇指，旁边数字加1，这样可以防止点击事件相互影响，例如点击下面拇指时会影响上面的计数。如：

//子元素太多，一个个绑定太麻烦，就绑定到他们的父亲上
    $(".big_box").on("click", ".item", function(){ 
        //遍历大盒子big_box下面的所有item元素，然后找到item元素下面的span元素
        //$(this)就是当前事件的对象
        var num = ($(this).find("span")).html();/*获得span元素里面的值*/
        var nowNum = parseInt(num) + 1
        // console.log(nowNum);
        $(this).find("span").html(nowNum); /*将加1后的值写到span里面*/
    } )

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]

## 3.点击拇指+1向右上角移动实现 ##

1.  首先引入jquary.js框架
    
    ![在这里插入图片描述][20190521110229593.png]
2.  绑定事件  
    ![在这里插入图片描述][2019052111033342.png]
3.  事件实现
    
     *  设置+1的初始位置  
        \+1是斜着向右上角移动，它的位置是相对拇指的，因此这里需要设置position属性为absolute。如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]
     *  设置定时器  
        因为+1的大小和位置还有透明度都是逐渐变化的，所以需要设置定时器，这里设置每40ms变化一次，时间比较短暂，看起来像是连续的变化。  
        向右上角移动的过程，字体每次增大10px，距离右侧和顶部的位置移动10px；透明度每次减少0.1，直到消失不见。每次+1的样式变化以后都要修改+1所在的变迁css的样式。如下：  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]

## 4.完整代码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            /*.big_box { background: url(./img/bg.jpg) no-repeat center; }*/
            .big_box .container{ 
                height: 135px;
                border: 1px solid green;
                width: 800px;
                margin: 0 auto;
            }
            .big_box .item{ 
                position: relative;
                width: 30px;
            }
            p { 
                margin-left: 20px;
                color: blue;
                font-weight: 600;
            }
            .item img { 
                width: 60px;
                height: 35px;
                margin-top: 8px;
                margin-left: 20px;
            }
            .item span { 
                margin-top: -41px;
                margin-left: 48px;
                display: flex;
            }
        </style>
    </head>
    <body>
    <div class="big_box">
        <div class="container">
            <p>风急天高猿啸哀，渚清沙白鸟飞回。无边落木萧萧下，不尽长江滚滚来</p>
            <p>万里悲秋常作客，百年多病独登台。艰难苦恨繁霜鬓，潦倒新停浊酒杯</p>
            <div class="item">
                <img src="img/timg.jpg">
                <span>0</span>
            </div>
        </div>
        <div class="container">
            <p>风急天高猿啸哀，渚清沙白鸟飞回。无边落木萧萧下，不尽长江滚滚来</p>
            <p>万里悲秋常作客，百年多病独登台。艰难苦恨繁霜鬓，潦倒新停浊酒杯</p>
            <div class="item">
                <img src="img/timg.jpg">
                <span>0</span>
            </div>
        </div>
        <div class="container">
            <p>风急天高猿啸哀，渚清沙白鸟飞回。无边落木萧萧下，不尽长江滚滚来</p>
            <p>万里悲秋常作客，百年多病独登台。艰难苦恨繁霜鬓，潦倒新停浊酒杯</p>
            <div class="item">
                <img src="img/timg.jpg">
                <span>0</span>
            </div>
        </div>
    </div>
    
        <script src="js/jquery-3.3.1.js"></script>
        <script>
            $('.item').click(function () { 
                AddFavor(this);
            });
    
            $(".big_box").on("click", ".item", function(){ 
                //遍历大盒子big_box下面的所有item元素，然后找到item元素下面的span元素
                //$(this)就是当前事件的对象
                var num = ($(this).find("span")).html();/*获得span元素里面的值*/
                var nowNum = parseInt(num) + 1
                // console.log(nowNum);
                $(this).find("span").html(nowNum); /*将加1后的值写到span里面*/
            } )
    
            //点赞函数
            function AddFavor(self) { 
                // DOM对象,设置+1的字体、位置和透明度
                var fontSize = 15;
                var top = 0;
                var right = 0;
                var opacity = 1;
    
                var tag = document.createElement('span');
                $(tag).text('+1');
                $(tag).css('color','green');
                $(tag).css('position','absolute');
                $(tag).css('fontSize',fontSize + "px");
                $(tag).css('right',right + "px");
                $(tag).css('top',top + 'px');
                $(tag).css('opacity',opacity);
                $(self).append(tag);
    
                var obj = setInterval(function () { 
                    //字体逐渐增大
                    fontSize = fontSize + 10;
                    //向右上角移动，距离顶部位置和右侧均每次减少10px
                    top = top - 10;
                    right = right - 10;
                    //透明度一次减少0.1
                    opacity = opacity - 0.1;
    
                    //随时间变化修改+1标签的css样式
                    $(tag).css('fontSize',fontSize + "px");
                    $(tag).css('right',right + "px");
                    $(tag).css('top',top + 'px');
                    $(tag).css('opacity',opacity);
                    if(opacity < 0){ 
                        clearInterval(obj);
                        $(tag).remove();
                    }
                }, 40);
    
            }
        </script>
    </body>
    </html>

本项目源码：[点赞项目源码][Link 1]

## 521快乐，每天进步一点点、充实一点点、加油！！！ ##

[20190521163050867.gif]: /images/20220129/37234515a22b4950bad473c617b76705.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]: /images/20220129/707137b5438040cc81fcc1808bb98209.png
[20190521110229593.png]: /images/20220129/67039a27410042ffadeba256b87908bf.png
[2019052111033342.png]: /images/20220129/7de6b7c0ee2743b8884e95a368df4dff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]: /images/20220129/147deb2612b94ad690ffc552c3f084fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]: /images/20220129/05cdff2d57264a9f8909de906e4e76b4.png
[Link 1]: https://github.com/wnn0809/frontProjects