悬浮数字的实现案例


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 EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 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/02 无线电
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
js实现电灯开关效果
2021/01/19 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python使用redis pool的一种单例实现方式
2016/04/16 Python
python3中str(字符串)的使用教程
2017/03/23 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
.net C#面试题
2012/08/28 面试题
总经理助理的八要求
2013/11/12 职场文书
《藏戏》教学反思
2014/02/11 职场文书
工程专业应届生求职信
2014/02/19 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
环保建议书400字
2014/05/14 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
感恩父母主题班会
2015/08/12 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
心得体会格式及范文
2016/01/25 职场文书