脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 悬浮数字

悬浮数字的实现案例

 更新时间：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处理。
复制代码 代码如下:

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

相关文章

  • js实现多张图片每隔一秒切换一张图片

    js实现多张图片每隔一秒切换一张图片

    这篇文章主要为大家详细介绍了js实现多张图片每隔一秒切换一张图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 微信小程序实现列表页的点赞和取消点赞功能

    微信小程序实现列表页的点赞和取消点赞功能

    这篇文章主要为大家详细介绍了微信小程序实现列表页的点赞和取消点赞功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • webuploader实现上传图片到服务器功能

    webuploader实现上传图片到服务器功能

    这篇文章主要为大家详细介绍了webuploader实现上传图片到服务器功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-08-08
  • JS 中数组的增删改查和对象的增删改查实例详解

    JS 中数组的增删改查和对象的增删改查实例详解

    这篇文章主要介绍了JS 中数组的增删改查和对象的增删改查实例详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-07-07
  • ES6 Symbol在对象中的作用实例分析

    ES6 Symbol在对象中的作用实例分析

    这篇文章主要介绍了ES6 Symbol在对象中的作用,结合实例形式分析了ES6 Symbol在对象中声明、使用方法与相关注意事项,需要的朋友可以参考下
    2020-06-06
  • 微信小程序 列表的上拉加载和下拉刷新的实现

    微信小程序 列表的上拉加载和下拉刷新的实现

    本文主要介绍了微信小程序中实现列表的上拉加载和下拉刷新的方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • 如何在JavaScript中比较日期详解

    如何在JavaScript中比较日期详解

    我们在日常开发过程中经常会用到JavaScript语言在前端代码中,进行日期的选择,下面这篇文章主要给大家介绍了关于如何在JavaScript中比较日期的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • JS原生带缩略图的图片切换效果

    JS原生带缩略图的图片切换效果

    这篇文章主要介绍了JS原生带缩略图的图片切换效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • uni-app微信小程序登录授权的实现

    uni-app微信小程序登录授权的实现

    这篇文章主要介绍了uni-app微信小程序登录授权的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • JS新包管理工具yarn和npm的对比与使用入门

    JS新包管理工具yarn和npm的对比与使用入门

    在2016年10月11日facebook 公开了新的javascript包管理工具 yarn, 用来替代目前被广泛使用的npm(nodejs 自带的包管理工具)，本文将介绍yarn工具带来的优点和使用入门，以及对比npm解决了什么问题，带来哪些便利。有需要的朋友们下面来一起看看吧。
    2016-12-12

最新评论