悬浮数字的实现案例


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 相关文章推荐
js获取提交的字符串的字节数
Feb 09 Javascript
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
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列出mysql表所有行和列的方法
2015/03/13 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
js遍历td tr等html元素
2012/12/13 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python输入二维数组方法
2018/04/13 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
美国在线宠物商店:Chewy
2019/01/12 全球购物
周年庆典邀请函范文
2014/01/23 职场文书
党员先进事迹材料
2014/12/19 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
个人德育工作总结
2015/03/05 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
周一给客户的问候语
2015/11/10 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
导游词之唐山景点
2019/12/18 职场文书