悬浮数字的实现案例


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 相关文章推荐
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
浅析javascript中的DOM
Mar 01 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 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
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
Vue精简版风格概述
2018/01/30 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
python实现按首字母分类查找功能
2019/10/31 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
美国留学经济担保书
2014/05/20 职场文书
总经理人事任命书
2014/06/05 职场文书
赢在中国观后感
2015/06/02 职场文书
宇宙与人观后感
2015/06/05 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python
Mysql 一主多从的部署
2022/05/20 MySQL