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

最新推荐文章于 2023-07-20 17:27:08 发布

tomorrownan

最新推荐文章于 2023-07-20 17:27:08 发布

阅读量1.1k

点赞数 6

分类专栏： JavaScript 文章标签： javascript jq 点赞

本文链接：https://blog.csdn.net/w1418899532/article/details/90383263

版权

JavaScript 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

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

用到的css处理知识如下：

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

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

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里面*/
} )

在这里插入图片描述

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

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

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>

本项目源码：点赞项目源码

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

tomorrownan

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
你会制作点赞吗？(含动图)

像常见的QQ空间点赞、微信点赞、各种论坛和微博都会有点赞的功能，其实现也是比较容易。用到的css处理知识如下：jquary的$(‘tag’).append()setInterval()定时器css样式透明度opacity定位position字体大小、位置实现代码实现代码如下：<!DOCTYPE html><html lang="en"><he...
复制链接

扫一扫