悬浮数字的实现案例


Posted in Javascript onFebruary 19, 2014

有时候新闻或者消息提示有几条,可以用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 相关文章推荐
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
小程序自定义日历效果
Dec 29 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
JS实现点击掉落特效
Jan 29 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 #Javascript
js实现身份证号码验证的简单实例
Feb 19 #Javascript
js实现表格字段排序
Feb 19 #Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 #Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 #Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 #Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 #Javascript
You might like
咖啡的化学
2021/03/03 咖啡文化
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
玩转Koa之koa-router原理解析
2018/12/29 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
软件工程师面试题
2012/06/25 面试题
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
市场安全管理制度
2014/01/26 职场文书
个人租房协议书样本
2014/10/01 职场文书
简爱读书笔记
2015/06/26 职场文书
实验室安全管理制度
2015/08/05 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
golang中的struct操作
2021/11/11 Golang
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle