悬浮数字的实现案例

更新时间：2014年02月19日 10:23:02 作者：

本篇文章主要是对悬浮数字的实现案例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

有时候新闻或者消息提示有几条，可以用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处理。

复制代码代码如下:

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);}
                    }
              });
            };
        });

悬浮数字

js判断是否是手机页面
本文主要介绍了js判断是否是手机页面的方法。具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03
搞定immutable.js详细说明
Immutable Data是指一旦被创造后，就不可以被改变的数据。通过使用Immutable Data，可以让我们更容易的去处理缓存、回退、数据变化检测等问题，简化我们的开发
2016-05-05
JavaScript中的变量作用域介绍
这篇文章主要介绍了JavaScript中的变量作用域介绍,本文同时讲解了一个新概念变量的作用域链,需要的朋友可以参考下
2014-12-12
js禁止小键盘输入数字功能代码
js禁止小键盘输入数字功能代码，需要的朋友可以参考下。
2011-08-08
浅谈JavaScript中内存泄漏的几种情况
本文主要介绍了浅谈JavaScript中内存泄漏的几种情况，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
javascript 嵌套的函数（作用域链）
当你进行函数的嵌套时，要注意实际上作用域链是发生变化的，这点可能看起来不太直观。你可把下面的代码置入firebug监视值的变化。
2010-03-03
JavaScript打开本地文件夹的4种方法举例
这篇文章主要给大家介绍了关于JavaScript打开本地文件夹的4种方法,JavaScript在前端开发中是一种使用非常广泛的编程语言,常用于实现网页中的交互和动态效果,需要的朋友可以参考下
2023-07-07
javascript 判断中文字符长度的函数代码
在很多时候,我们在进行数据提交数据库时.先会用javascript对其进行有效性验证.如一个中文javascript为的length是1.但是数据库中会占二个字节.容易出错
2012-08-08
Web打印解决方案之证件套打的实现思路
这篇文章主要介绍了Web打印解决方案之证件套打的实现思路的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08
js实现超级玛丽小游戏
这篇文章主要为大家详细介绍了js实现超级玛丽小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03