悬浮数字的实现

简介:

有时候新闻或者消息提示有几条,可以用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);}
                    }
              });
            };
        });        
复制代码



相关文章
|
3天前
|
弹性计算 运维 Shell
显示进度条(数字版)
【4月更文挑战第29天】
11 2
|
3天前
|
弹性计算 运维 Shell
显示进度条(数字版)
【4月更文挑战第29天】
13 0
|
6月前
|
前端开发
鼠标点击<input>输入框后边框发生颜色变化
鼠标点击<input>输入框后边框发生颜色变化
42 0
|
6月前
鼠标悬浮显示文字的简单方法
鼠标悬浮显示文字的简单方法
|
6月前
设置按钮背景为透明去掉button按钮左右两边的留白
设置按钮背景为透明去掉button按钮左右两边的留白
带加减按钮的数字输入框(整理)
带加减按钮的数字输入框(整理)
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
|
前端开发 JavaScript 计算机视觉
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
938 0
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
|
前端开发
解决字母或数字溢出盒子(文字超出时不自动换行)
解决字母或数字溢出盒子(文字超出时不自动换行)
304 0
解决字母或数字溢出盒子(文字超出时不自动换行)
|
Web App开发 前端开发 iOS开发
纵向排列文字以及禁止文字选中
内容包括demo代码,应用和定义,以及参考文献,本文主要内容是本人学习过程中遇到css的零碎知识点1(就是以前自己不知道的),我都记下来了,需要的朋友可以过来参考下,喜欢的可以点个赞,希望对大家有所帮助。 writing-mode: tb-rl; (纵向排列文字)应用: 说明:设置或检索对象的内容块固有的书写方向。西方语言一般都是 lr-tb 的书写方式,但是亚洲语言 lr-tb | tb-rl 的书写方式都有。作为IE的私有属性之一,IE5.5率先实现了 writing-mode ,后期被w3c采纳成标准属性;此属性效果不能被累加使用。例如,父对象的此属性值
120 0
纵向排列文字以及禁止文字选中