css - 如何实现图片的角标呢？

问题描述

问 题

怎么实现这种图片的角标呢？要能动态改变角标的值。。。

解决方案

<div data-num='22' id="a1">33333</div>

            #a1 {
                width: 200px;
                height: 200px;
                background-color: #333;
                color: #fff;
                position: relative;
                margin-top: 50px;
            }
            
            #a1:after {
                content: attr(data-num);
                line-height: 50px;
                text-align: center;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: red;
                position: absolute;
                top: -20px;
                right: -20px;
            }

                $('#a1').click(function() {
                    var n = $("#a1").attr('data-num');
                    $("#a1").attr('data-num', ++n);
                });
                //                $('#a1').click(function() {
                //                    console.log($("#a1").data('num'));
                //                    $("#a1").data('num', '3333');
                //                    console.log($("#a1").data('num'));
                //                });

伪类做的，动态赋值也顺手写了

这篇关于css - 如何实现图片的角标呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！