悬浮数字的实现

有时候新闻或者消息提示有几条,可以用absolute定位来实现效果。

原理是什么呢?

1.获取数字或者状态。

function getnewscount(){
        $time = date("Y-m-d",strtotime("-3 day"));
        $where["News.checkked = ?"] = array("val"=>1 , "type"=>1);
        $where["News.UpdateTime >= ?"] = array("val"=>$time,"type"=>1);//‘2014-01-10‘
        $news = $this->dao_news->getNews($where);
        return count($news);
    }

    function getstatus($user_id){
        $where["lx_messageto.user_id = ?"] = array("val"=>$user_id , "type"=>1);
        $where["lx_messageto.status = ?"] = array("val"=>1,"type"=>1);
        $message = $this->dao_message->getMessageTo($where);
        return count($message);
    }

2.前端处理显示。用js处理。

<div style="position:absolute;" class="status1">
            <!--{if $statusCount neq ""}-->
            <div class="status_num">
            <!--{$statusCount}-->
            </div>
            <!--{/if}-->
        </div>

        <div style="position:absolute;" class="status2">
            <!--{if $newsCount neq ""}-->
            <div class="status_icon">
            <img src="/images/common/new.png">
            </div>
            <!--{/if}-->
        </div>

css

.status_num{
    position:absolute;
    left:70px; top:0px;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(234, 87, 122, 1)), to(rgba(136, 4, 25, 1)));
    height:30px; line-height:30px;
    vertical-align:middle;
    font-family:Verdana, Geneva, sans-serif; color:#fff;
    font-size:14px;-webkit-border-radius:30px;
    padding:0px 10px; margin-left:20px;
    -webkit-box-shadow:1px 1px 3px #999;}

.status_icon{
    position:absolute;
    left:70px; top:0px;
}

js处理

$(function() {
            aMess = $("a[href ^= ‘/message‘]");
            aNews = $("a[href ^= ‘/news/index‘]");
            var status = $(".status1");
            var statusnews = $(".status2");
            aNews.prepend(statusnews);
            aMess.prepend(status); //处理消息的
        });

3.或者用ajax获取数据ajax处理

$(function() {
            if( $("a[href *= ‘/news/mgr‘]") != " " ){
              aNews = $("a[href *= ‘/news/mgr‘]") ;
              $.ajax({
                    dataType:‘html‘,
                    type:"POST",
                    url:"/default/index/ajaxgetnewstatus",
                    success:function(msg){
                        if(msg > 0){
                        var num = ‘<div style="position:absolute;" class="status1">‘
                                +‘<div class="status_num">‘+msg+‘</div></div>‘;
                        aNews.prepend(num);}
                    }
              });
            };
        });        
时间: 2024-10-08 02:53:11

悬浮数字的实现的相关文章

手机卫士08_应用程序的flags_PopupWidnow悬浮窗体

1,应用管理的ui界面 条目界面的参考ui ①然后显示在ListView上即可(记得优化,程序大小的格式化等) ②获取ListView需要花费一定时间,所以放在子线程,再通过runOnUiThread()更新ui即可 ③创建一个FrameLayout,包含ListView,然后设置一个等待框,在获取的时候显示在页面上. 2,应用程序的flags (可以区分应用程序的安装位置,系统和用户安装的程序等) 2.1 ①在遍历每一个包信息的时候packInfo.application.flags(可能是多

(转)在NGUI使用图片文字(数字、美术字)(直接可用于UILable)

本文永久地址:http://www.omuying.com/article/24.aspx,[文章转载请注明出处!] 在 Unity 开发过程中,我们经常会使用到美术提供的图片文字(数字)来美化我们的游戏界面,借助强大的 NGUI 插件支持,我们很容易就可以在界面上显示美术字!具体步骤可以参与如下操作: 说明:使用的 NGUI 插件版本为 NGUI Next-Gen UI v3.5.8,因版本不同,步骤可能会有所不同,请根据插件版本选择合适的步骤. 1.NGUI 支持图片字体(美术字),我们可以

大写中文数字-財务

壹.贰.叁.肆.伍.陆.柒.捌.玖.拾.佰.仟.万.亿.元(圆).角.分.零.整.这是大家常常要填写的大写数字,问什么要用大写数字呢?想必非常多人都不是非常清楚! 先看看下面两个有关大写数字的表格: 1.数码与大.小写数字的对比表: 数码 小写数字 大写数字 0 ○ 零 1 一 壹 2 二 贰 3 三 叁/參 4 四 肆 5 五 伍 6 六 陆 7 七 柒 8 八 捌 9 九 玖 2.进位数码与大.小写数字的对比表 数码 小写数字 大写数字 10 十 拾 20 二十 廿 30 三十 卅 100

习题7 数字金字塔

输入任意数字X(例:6),输出如下图形 首先使用两层for循环,一层循环行数,一层循环列数 如题,在列中,不仅要输出"*",还要输出空格,所以在第一层for循环中,应使用两个并列的for循环 import java.util.Scanner; public class Jinzita { public static void main(String[] args) { Scanner scanner=new Scanner(System.in); int x=scanner.nextI

WORD2010如何把全角字母和数字批量转换成半角

个人觉得全角字符看起来相当别扭,如果文档中存在大量全角形式的字母和数字,要如何把它们全部转化成半角的呢? 全角和半角 全角是指一个字符占用两个标准字符位置的状态.汉字字符和规定了全角的英文字符及国标GB2312-80中的图形符号和特殊字符都是全角字符. 半角的显示内码都是一个字节,英文字母.罗马数字.西方语言的符号都是半角形式. END 如何实现全角半角间的转换 全角字符占用更多字符,看起来也不够美观,如何将全角字符转换成半角的呢?这里我们可以利用word来实现.   不论是txt文档还是其他什

20170913自制猜数字游戏

/* 猜数字:系统随机生成一个四位数,请根据下列判断猜出来 A:数值正确,位置正确 B:数值正确,位置不正确 C:数值不正确 */ #include<stdio.h> #include<time.h> #include<stdlib.h> #pragma warning (disable:4996) #define pUCharHead unsigned char * //以数组形式返回n个无重复的随机数,范围可指定[min,max] pUCharHead GenNoR

数字在排序数组中出现的次数

题目:统计一个数字在排序数组中出现的次数.例如输入排序数组{1,2,3,3,3,3,4,5}和数字3,由于3在这个数组中出现了4次,因此输出4. 程序实现: import java.util.Scanner; public class Test38 { public static void main(String[] args) { /**  * 初始化数组,测试数据可以多种途径初始化  */   Scanner in = new Scanner(System.in); /*int[] a = 

51Nod 1009 数字1的个数 | 数位DP

题意: 小于等于n的所有数中1的出现次数 分析: 数位DP 预处理dp[i][j]存 从1~以j开头的i位数中有几个1,那么转移方程为: if(j == 1) dp[i][j] = dp[i-1][9]*2+pow(10,i-1);else dp[i][j] = dp[i-1][9]+dp[i][j-1]; 然后注意下对于每个询问统计的时候如果当前位为1需要额外加上他后面所有位数的个数,就是n%pow(10,i-1); 这样总复杂度log(n)*10 #include <bits/stdc++.

经济动能转换现万亿商机,腾讯云造人工智能数字商业

2017年6月,发改委印发<服务业创新发展大纲(2017-2025年)>(以下简称<大纲>),大纲指出我国正处于工业转型升级.新型城镇化推进和消费结构升级的大趋势中.预计到2025年,服务业增加值占GDP比重提高到60%. 根据国家统计局,2016年我国服务业增加值占GDP的比重达到51.6%.按2016年中国74万亿GDP估算,未来8年我国服务业增加值将有6.2万亿的增长空间.而数字经济和数字服务则是服务业增加值新增长的来源,对于企业来说则要把握历史机遇.加快推动数字商业创新发展