jquery消息红点提示

图片

html

1 <a title="消息" id="h-message" href="javascript:void(0)"><i class="iconfont icon-daohang-xiaoxitixing navi"></i><span id="msgNum" class="ii"><span id="num" ></span></span></a>

 

js

 1 if(data.data !=null){
 2                     
 3                         if(data.data!=0&&data.data<10){
 4                             $('#msgNum').css({'width':'12px'})
 5                             $("#msgNum").show();
 6                             $("#num").show();
 7                             $("#num").text(parseInt(data.data));
 8                         }else if(data.data!=0&&data.data>=10&&data.data<100){
 9                             $("#msgNum").show();
10                             $('#msgNum').css({'width':'18px'})
11                             $("#num").show();
12                             $("#num").text(parseInt(data.data));
13                         }else if(data.data!=0&&data.data>100){
14                             $("#msgNum").show();
15                             $('#msgNum').css({'width':'18px'})
16                             $("#num").show();
17                             $("#num").text('MAX');
18                         }else{
19                             $("#msgNum").hide();
20                             $("#num").hide();
21                             console.log('无待办事项');
22                         }
23                 }else{
24                     console.log('异常');
25                 }

 

css

 1 /*角标 */
 2     .ii{
 3         /* display: none; */
 4         display: block;
 5         background: #f00;
 6         border-radius: 50%;
 7         /* width: 12px; */
 8         height: 12px;
 9         top: 10px;
10         right: 5px;
11         position: absolute;
12         text-align: center;
13         /* color: #FFF; */
14         z-index: 99999;
15     }
16     
17     #num{
18         color: #FFF;
19         z-index: 999999;
20         position: absolute;
21         top: -25px;
22         left: 2px;
23         /* text-align: center; */
24     }

 

posted @ 2020-11-05 14:17  俩只猫  阅读(400)  评论(0)  编辑  收藏  举报