欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

悬浮数字的实现案例

时间:2020-12-09 20:19:44|栏目:JavaScript代码|点击:
有时候新闻或者消息提示有几条,可以用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);}
                    }
              });
            };
        });

上一篇:用 JavaScript 迁移目录

栏    目:JavaScript代码

下一篇:用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载

本文标题:悬浮数字的实现案例

本文地址:http://www.codeinn.net/misctech/30891.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有