点赞效果

最新推荐文章于 2023-02-23 17:33:17 发布
最新推荐文章于 2023-02-23 17:33:17 发布
阅读量256 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guoyu1_/article/details/86157890
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .out{width: 500px;border: 1px solid #999;margin: 50px auto;padding: 20px;}
        .out .row{border-bottom: 1px solid #ccc;}
        .out .btn{cursor: pointer;display: inline-block;}/*手*/
        .out .btn i{display: inline-block;width: 20px;height: 20px;background: url("img/zan.png");
            margin-right: 6px;vertical-align: middle;}
        .out .btn.on i{background-image: url("img/zan-h.png");}
        .out .btn b{vertical-align: middle;}
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div class="out">
    <div class="row">
        <h2>朋友圈标题</h2>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        <div class="btn" data-key="on">
            <i></i><b>5</b>
        </div>
    </div>
    <div class="row">
        <h2>朋友圈标题</h2>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        <div class="btn" data-key="on">
            <i></i><b>10</b>
        </div>
    </div>
    <div class="row">
        <h2>朋友圈标题</h2>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        <div class="btn" data-key="on">
            <i></i><b>15</b>
        </div>
    </div>
    <div class="row">
        <h2>朋友圈标题</h2>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        <div class="btn" data-key="on">
            <i></i><b>20</b>
        </div>
    </div>
    <div class="row">
        <h2>朋友圈标题</h2>
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        <div class="btn" data-key="on">
            <i></i><b>25</b>
        </div>
    </div>
</div>
<script>
    $(function () {
        $('.btn').click(function () {
            if ($(this).attr('data-key')=='on'){
                //点赞
                $(this).addClass('on');
                var num=Number($(this).find('b').html());//找到点赞数目,但是却是字符串类型，用number将字符串类型转换为数字类型
                alert(typeof num);//typeof看类型
                alert(num+1);//在点赞数目基础上+1
                $(this).find('b').html(num+1);

                $(this).attr('data-key','');//点击>1次时候将无法继续增加赞数，让他等于空
            }else {
                //取消赞
                $(this).removeClass('on');
                var num=Number($(this).find('b').html());//找到点赞数目,但是却是字符串类型，用number将字符串类型转换为数字类型
                alert(typeof num);//typeof看类型
                alert(num-1);//在点赞数目基础上-1
                $(this).find('b').html(num-1);

                $(this).attr('data-key','on');//点击<1次时候将无法继续取消赞数，让他等于on
            }

        })
    })
</script>
</body>
</html>

效果图：

前端路上迷茫的小鲨鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android点赞效果
08-01
在Android应用开发中，"点赞效果"是一种常见的用户交互元素，尤其在社交应用中非常普遍。QQ作为一款大型社交平台，其点赞功能的设计和交互体验备受用户喜爱。本教程将探讨如何在Android应用中实现类似QQ的点赞效果，...
【vue】vue.js点赞飘心动画
糖葫芦哎的博客
01-16 1713
结合网上小伙伴用jq写的直播间点赞飘心效果，根据自己的需求改成了vue渲染，特来总结记录一下
vue点赞特效
wangming0123的博客
05-06 1083
<template> <div class="videoEvent"> <div class="item" @click="canvas"> <canvas id="cvs"></canvas> </div> </div> </template> <script> import LikeHeart from "../../../common/flutter-he
直播飘心功能实现
snowrain1108的专栏
07-27 2832
直播越来越火，当然直播中点赞飘心也成为了每个直播的必有的功能，前段时间就研究了一下这个功能，发布出来以供大家共享，下面我们就谈谈如何实现这一功能。 本来想用ELEmitterLayer来实现通过发射粒子 但是呢目前没有研究到怎么利用这个来实现心一边往上飘一遍变成透明的功能。 本篇博客实现的功能是 心从小到大做曲线往上飘最后消失的功能如下图1 那么接下来我们看看代码是怎么实现的 1.实现本
HTML5 Canvas爱心飘动动画特效 转载
狼丶宇先森的网络科技空间
08-21 7117
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;HTML5 Canvas爱心飘动动画特效&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;/head&gt; &lt;body&gt; &lt;c
vue实现纯css直播点赞图标的动画效果组件
weixin_50450473的博客
02-23 1364
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~轻映录屏 2023-02-23 17-23-41。
js实现点赞效果
10-15
主要为大家详细介绍了js实现点赞效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现手动点赞效果
10-17
主要为大家详细介绍了javascript实现手动点赞效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
贝塞尔曲线实现直播点赞效果
10-31
在直播点赞效果中，贝塞尔曲线的运用可以为用户带来更直观、动态且引人入胜的交互体验。 首先，我们需要理解贝塞尔曲线的基本概念。贝塞尔曲线是由法国工程师皮埃尔·贝塞尔(Pierre Bézier)提出的，它通过控制点来...
Android自定义view，点赞效果
11-02
本主题聚焦于“Android自定义View，点赞效果”，这是一个常见的需求，特别是在社交应用或者互动性强的应用中，用户点赞动作通常会伴随着引人注目的动画效果来提升用户体验。 首先，我们来理解自定义View的基本概念...
vue实现直播间点赞飘心效果的示例代码
10-16
主要介绍了vue实现直播间点赞飘心效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
点赞飘心+贝塞尔曲线+直播界面
10-28
点赞飘心+贝塞尔曲线+直播界面
五个喜欢点赞图标动画特效（附源码，效果图）
calm_programmer的博客
10-27 1582
五个喜欢点赞图标动画特效（附源码，效果图）
Layui 使用 CSS+JavaScript 实现点赞评论功能
qq_42782011的博客
03-29 2923
html+css+js 实现点赞 评论等功能
200行代码打造直播间点赞、飘心效果
sinat_33308421的博客
09-01 1741
先上效果图：   用到了二阶贝塞尔曲线，先来学习学习。         原理： 由 P0 至 P1 的连续点 Q0，描述一条线段。               由 P1 至 P2 的连续点 Q1，描述一条线段。               由 Q0 至 Q1 的连续点 B(t)，描述一条二次贝塞尔曲线。   按照我自己的理解就是，P0和P2分别
直播间点赞桃心飘动效果的视图控件
未来很长，但我会努力的走下去。
08-25 3790
FlutteringLayout 项目地址：jenly1314/FlutteringLayout  简介：直播间点赞桃心飘动效果的视图控件 fluttering-animation-animator-room-heart-like-praise-periscope-floating-live-贝塞尔曲线-桃心-     FlutteringLayout for Android 一个直播间...
vue点赞飘心（实测可用）
大大大大冬瓜
01-24 2154
点赞飘心的组件，拿来即用
js获取当前页面高度
热门推荐
九亿宅男的梦的博客
10-08 2万+
Javascript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scro...
简单点赞效果html,js实现点赞效果
最新发布
06-09
好的，以下是一个简单的点赞效果的HTML和JS实现： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点赞效果</title> <style> .like-btn { display: inline-block; padding: 5px 10px; background-color: #eaeaea; border-radius: 5px; cursor: pointer; } .liked { background-color: pink; } </style> </head> <body> <div class="like-btn">点赞</div> <script> var likeBtn = document.querySelector('.like-btn'); var isLiked = false; likeBtn.addEventListener('click', function() { if (!isLiked) { likeBtn.classList.add('liked'); likeBtn.innerHTML = '取消点赞'; } else { likeBtn.classList.remove('liked'); likeBtn.innerHTML = '点赞'; } isLiked = !isLiked; }); </script> </body> </html> ``` 这段代码实现了一个简单的点赞效果，当用户点击“点赞”按钮时，按钮的背景颜色会变成粉色，文字会变成“取消点赞”，再次点击时则会恢复原状。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值