欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

懸浮數(shù)字的實(shí)現(xiàn)案例

 更新時(shí)間:2014年02月19日 10:23:02   作者:  
本篇文章主要是對(duì)懸浮數(shù)字的實(shí)現(xiàn)案例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
有時(shí)候新聞或者消息提示有幾條,可以用absolute定位來(lái)實(shí)現(xiàn)效果。



原理是什么呢?

1.獲取數(shù)字或者狀態(tài)。

復(fù)制代碼 代碼如下:

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處理。
復(fù)制代碼 代碼如下:

<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
復(fù)制代碼 代碼如下:

.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處理
復(fù)制代碼 代碼如下:

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

3.或者用ajax獲取數(shù)據(jù)ajax處理
復(fù)制代碼 代碼如下:

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

相關(guān)文章

  • js判斷是否是手機(jī)頁(yè)面

    js判斷是否是手機(jī)頁(yè)面

    本文主要介紹了js判斷是否是手機(jī)頁(yè)面的方法。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2017-03-03
  • 搞定immutable.js詳細(xì)說(shuō)明

    搞定immutable.js詳細(xì)說(shuō)明

    Immutable Data是指一旦被創(chuàng)造后,就不可以被改變的數(shù)據(jù)。通過(guò)使用Immutable Data,可以讓我們更容易的去處理緩存、回退、數(shù)據(jù)變化檢測(cè)等問(wèn)題,簡(jiǎn)化我們的開(kāi)發(fā)
    2016-05-05
  • JavaScript中的變量作用域介紹

    JavaScript中的變量作用域介紹

    這篇文章主要介紹了JavaScript中的變量作用域介紹,本文同時(shí)講解了一個(gè)新概念變量的作用域鏈,需要的朋友可以參考下
    2014-12-12
  • js禁止小鍵盤(pán)輸入數(shù)字功能代碼

    js禁止小鍵盤(pán)輸入數(shù)字功能代碼

    js禁止小鍵盤(pán)輸入數(shù)字功能代碼,需要的朋友可以參考下。
    2011-08-08
  • 淺談JavaScript中內(nèi)存泄漏的幾種情況

    淺談JavaScript中內(nèi)存泄漏的幾種情況

    本文主要介紹了淺談JavaScript中內(nèi)存泄漏的幾種情況,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • javascript 嵌套的函數(shù)(作用域鏈)

    javascript 嵌套的函數(shù)(作用域鏈)

    當(dāng)你進(jìn)行函數(shù)的嵌套時(shí),要注意實(shí)際上作用域鏈?zhǔn)前l(fā)生變化的,這點(diǎn)可能看起來(lái)不太直觀。你可把下面的代碼置入firebug監(jiān)視值的變化。
    2010-03-03
  • JavaScript打開(kāi)本地文件夾的4種方法舉例

    JavaScript打開(kāi)本地文件夾的4種方法舉例

    這篇文章主要給大家介紹了關(guān)于JavaScript打開(kāi)本地文件夾的4種方法,JavaScript在前端開(kāi)發(fā)中是一種使用非常廣泛的編程語(yǔ)言,常用于實(shí)現(xiàn)網(wǎng)頁(yè)中的交互和動(dòng)態(tài)效果,需要的朋友可以參考下
    2023-07-07
  • javascript 判斷中文字符長(zhǎng)度的函數(shù)代碼

    javascript 判斷中文字符長(zhǎng)度的函數(shù)代碼

    在很多時(shí)候,我們?cè)谶M(jìn)行數(shù)據(jù)提交數(shù)據(jù)庫(kù)時(shí).先會(huì)用javascript對(duì)其進(jìn)行有效性驗(yàn)證.如一個(gè)中文javascript為的length是1.但是數(shù)據(jù)庫(kù)中會(huì)占二個(gè)字節(jié).容易出錯(cuò)
    2012-08-08
  • Web打印解決方案之證件套打的實(shí)現(xiàn)思路

    Web打印解決方案之證件套打的實(shí)現(xiàn)思路

    這篇文章主要介紹了Web打印解決方案之證件套打的實(shí)現(xiàn)思路的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-08-08
  • js實(shí)現(xiàn)超級(jí)瑪麗小游戲

    js實(shí)現(xiàn)超級(jí)瑪麗小游戲

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)超級(jí)瑪麗小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-03-03

最新評(píng)論