图标闪动提醒，并加载内容到弹出框jQuery插件

前端 JavaScript jQuery

创建时间:2016-03-16 10:17

字数:1.7k 阅读:

示例
界面小图标
图标闪动js
从后台获取信息，判断是否闪动
页面加载进来，调用方法
topremind.html
jquery-skyLayer.js
style.css
参考文章

示例

界面小图标

<div class="right" ID="soccer">
<a href="javascript:void(0);" title="消息" >
    <img src="css/images/ic_notifications.png">
</a></div>

图标闪动js

var msecs = 750; //改变时间得到不同的闪烁间隔,毫秒；
var counter = 0;
var whetherFlashing = false;//是否闪动
setInterval("blink()", msecs);
function blink() {//闪动
    if(whetherFlashing){
        soccer.style.visibility = (soccer.style.visibility == "hidden") ? "visible" : "hidden";
        counter +=1;
    }else{
        soccer.style.visibility = "visible";
    }
}

从后台获取信息，判断是否闪动

var topInfoSize = 0;//待信息量
var topWorkReceiveSize = 0;//工作未处理信息量
var topthreshold = 0;//提醒阀值

setInterval("Push()",300000);//5分钟，刷新一次
//后台返回结果示例：{InfoSize: "57", WorkReceiveSize: "0", threshold: "50"}
function Push() {
       $.ajax({
           type: "POST",
           url:"remind/getRemind.do?type=refresh",
        success: function(data) {
               var obj = eval ("(" + data + ")");
               topInfoSize = parseInt(obj.InfoSize);
               topthreshold = parseInt(obj.threshold);
               topWorkReceiveSize = parseInt(obj.WorkReceiveSize);

               if((parseInt(obj.InfoSize)<parseInt(obj.threshold)) && obj.WorkReceiveSize == 0 ){
                   //同时满足 小于阀值，没有工作信息，停止闪动
                   whetherFlashing = false;
               }
               if(parseInt(obj.InfoSize)>=parseInt(obj.threshold)){
                   whetherFlashing = true;
               }
               if(parseInt(obj.WorkReceiveSize) > 0){
                   whetherFlashing = true;
            }
           }
     });
}

页面加载进来，调用方法

$(function(){
    $('#soccer').mousemove(function(){//鼠标移动上去触发
        $(this).skyLayer({id:'img',
        title:'我的消息',url:"./page/office/remind/topremind.html"});
    })
    $('#soccer').click(function(){//点击触发
        $(this).skyLayer({id:'img',
        title:'我的消息',url:"./page/office/remind/topremind.html"});
    })
    window.onresize=function(){
        $.fn.skyLayer.Sclose()//关闭提醒框
    }
    Push();//首次进入界面，获得提醒信息
});

topremind.html

<html>
<head>
<script type="text/javascript">
    $(function(){
        $('#context').text(topInfoSize);//待处理信息量
        if(topInfoSize>=topthreshold){
               $('#contextInfo').css("color","red");
           }else {
               $('#contextInfo').css("color","");
           }

           $('#WorkReceiveSize').text(topWorkReceiveSize);//工作未处理信息量
           if(topWorkReceiveSize > 0){
               $('#contextInfo2').css("color","red");
        }else {
               $('#contextInfo2').css("color","");
           }
    });
</script>
</head>
<body >
<div >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr  style="cursor:pointer;" onclick="">
        <td height="30">
            <img src="./images/blue3.png" />
        </td>
        <td height="30" >
        <label id="contextInfo" style="cursor:pointer;" >
            待处理信息量：<label id="context" style="cursor:pointer;"></label></label>
        </td>
    </tr>
    <tr style="cursor:pointer;" onclick="">
        <td height="30">
            <img src="./images/blue8.png">
        </td>
        <td height="30">
            <label id="contextInfo2" style="cursor:pointer;">工作未处理信息量：<label style="cursor:pointer;" id="WorkReceiveSize" ></label></label>
        </td>
    </tr>
    </table>
  </div>
  </body>
</html>

jquery-skyLayer.js

/**
 * 功能： 加载内容到弹出框
 * 作者： SKY
 * email：lavi_sky@163.com
 */
(function($){
    $.fn.skyLayer = function(options){
        var defaults={
            id:"id",//id必须防止重复
            title:"标题" , //显示在弹出层的标题
            url:""//要加载的内容地址
        }
        var opts = $.extend(defaults, options);
        var position = this.position();
        var left = position.left - this.width() - 5;
        var top = position.top + this.height() + 5;
        var html = '<div id="layer_'+opts.id+'" class="sky-layer" style="display:block;left:'+left+'px;top:'+top+'px;"><div class="holder"><div class="content"><div class="sky-tab clearfix"><a href="javascript:;">'+opts.title+'</a></div><div class="sky-sub-tab clearfix">';
        html += '<div id="loadurl"><div class="voloading"></div></div>';
        html +='</div><ul class="sky-detail clearfix"></ul></div><a class="sky-close" href="javascript:;"></a></div><a class="sky-tri" href="javascript:;"></a></div>';
        if($('#layer_'+opts.id).css('display')!='block'){
            if($('.sky-layer').attr('id')!='' && $('.sky-layer').attr('id')!=opts.id){
                $('.sky-layer').remove();
            }
            this.after(html);
            $('#loadurl').load(opts.url)
        }else{
            $.fn.skyLayer.Sclose()
        }
        $('.sky-close').click(function(){
            $.fn.skyLayer.Sclose()
        })
        $.fn.skyLayer.Sclose=function(){
            $('#layer_'+opts.id).remove();
        }
    };
})(jQuery)

style.css

/** 清除内外边距 **/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,/* structural elements 结构元素 */
dl,dt,dd,ul,ol,li,/* list elements 列表元素 */
pre,/* text formatting elements 文本格式元素 */
form,fieldset,legend,button,input,textarea,/* form elements 表单元素 */
th,td /* table elements 表格元素 */{margin:0;padding:0;}

/** 设置默认字体 **/
body,
button,input,select,textarea /* for ie */{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;} /* 将斜体扶正 */
code,kbd,pre,samp{font-family:courier new,courier,monospace;} /* 统一等宽字体 */
small{font-size:12px;} /* 小于 12px 的中文很难阅读，让 small 正常化 */

/** 重置列表元素 **/
ul,ol{list-style:none;}

/** 重置文本格式元素 **/
a{text-decoration:none;}
a:hover{text-decoration:underline;}

sup{vertical-align:text-top;} /* 重置，减少对行高的影响 */
sub{vertical-align:text-bottom;}


.sky-layer{display:none;position:absolute;left:200px;top:200px;z-index:10;width:394px;border-radius:4px;padding:4px;background:url("../img/layer_bg.png");}
.sky-layer .holder{position:relative;z-index:30;border:1px solid #c3c3c3;border-radius:4px;background:#fff;}
.sky-layer .sky-tri{position:absolute;margin:0;left:30px;top:-7px;z-index:40;width:16px;height:12px;background:url("../img/layer_arrow.png");}
.sky-layer .sky-close{display:block;margin:0;position:absolute;right:14px;top:5px;z-index:20;width:20px;height:20px;background:url("../img/ico.png") 5px -250px no-repeat;}
.sky-layer .sky-close:hover{background-position:0 -1954px;}
.sky-layer .sky-tab{padding:4px 4px 0 6px;background:#F0F0F0;}
.sky-layer .sky-tab a{width:auto;display:block;float:left;height:25px;margin:0 3px;padding:0 10px;border:1px solid #E8E8E8;border-bottom:0;border-radius:4px 4px 0 0;background:#fff;font-size:12px;font-weight:400;text-overflow:clip;color:#666;text-decoration:none;line-height:25px;}
.sky-layer .sky-sub-tab{position:relative;margin:10px 16px;overflow:hidden;}
.sky-layer .sky-sub-tab .sky-close,.sky-layer .sky-sub-tab .sky-tri{display:block;float:left;height:23px;padding:0 7px;color:#9ABBC8;font-size:12px;font-weight:400;text-decoration:none;line-height:23px;}
.sky-layer .sky-sub-tab a.slct{background:none repeat scroll 0 0 #F0F0F0;border-radius:3px 3px 3px 3px;cursor:default;position:relative;text-decoration:none;z-index:2;}
.sky-layer .sky-sub-tab span{float: left; margin: 0 5px; color:#9ABBC8;}
.sky-layer .sub-tab-pagination{position:absolute;right:10px;top:0px;height:100%;}
.sky-layer .sub-tab-pagination a{display:none;width:17px;height:17px;margin:0 2px;padding:0;background:url("../img/ico.png") no-repeat;cursor:pointer;display:inline;line-height:17px;}
.sky-layer .sub-tab-pagination .pre{background-position:0 -1290px;}
.sky-layer .sub-tab-pagination .next{background-position:0 -1176px;}
.sky-layer .sub-tab-pagination a.pre-disable{background-position:0 -1367px;cursor:default;}
.sky-layer .sub-tab-pagination a.next-disalbe{background-position:0 -1253px;cursor:default;}
.sky-layer .sky-detail{margin:10px;}
.sky-detail li{display:block;float:left;width:26px;height:22px;margin:-1px 0 0 -1px;border:1px solid #e8e8e8;padding:4px 2px;text-align:center;cursor:pointer;}
.sky-detail li:hover{position:relative;border:1px solid #0095cd;background:#fff9ec;z-index:50;}


.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

参考文章

网友SKY分享原创加载内容到弹出框Jquery插件

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 bin07280@qq.com