悬浮数字的实现案例


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 相关文章推荐
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
SVG描边动画
Feb 23 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 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全局变量和类配合使用深刻理解
2013/06/05 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
PHP时间处理类操作示例
2018/09/05 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
layui的select联动实现代码
2019/09/28 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Python网络编程详解
2017/10/31 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
就业表自我评价分享
2014/02/06 职场文书
教师一帮一活动总结
2014/07/08 职场文书
房产授权委托书范本
2014/09/22 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
实习介绍信模板
2015/01/30 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书