动态醒目提示插件jquery.pulsate的自定义改造

简介: 1、页面引用 基础jquery库jquery.js2、直接在jquery.pulsate.min.js文件中追加自定义内容,页面引用jquery.pulsate.min.js文件。

1、页面引用 基础jquery库jquery.js

2、直接在jquery.pulsate.min.js文件中追加自定义内容,页面引用jquery.pulsate.min.js文件。

后面的三个方法是加的,前面的经过压缩的是插件原来的内容。

(function(c){var j={init:function(a){var b={color:c(this).css("background-color"),reach:20,speed:1E3,pause:0,glow:!0,repeat:!0,onHover:!1};c(this).css({"-moz-outline-radius":c(this).css("border-top-left-radius"),"-webkit-outline-radius":c(this).css("border-top-left-radius"),"outline-radius":c(this).css("border-top-left-radius")});a&&c.extend(b,a);b.color=c("<div style='background:"+b.color+"'></div>").css("background-color");!0!==b.repeat&&(!isNaN(b.repeat)&&0<b.repeat)&&(b.repeat-=1);return this.each(function(){b.onHover?
c(this).bind("mouseover",function(){g(b,this,0)}).bind("mouseout",function(){c(this).pulsate("destroy")}):g(b,this,0)})},destroy:function(){return this.each(function(){clearTimeout(this.timer);c(this).css("outline",0)})}},g=function(a,b,d){var f=a.reach;d=d>f?0:d;var h=(f-d)/f,e=a.color.split(","),h="rgba("+e[0].split("(")[1]+","+e[1]+","+e[2].split(")")[0]+","+h+")",e={outline:"2px solid "+h};a.glow?(e["box-shadow"]="0px 0px "+parseInt(d/1.5)+"px "+h,userAgent=navigator.userAgent||"",/(chrome)[ \/]([\w.]+)/.test(userAgent.toLowerCase())&&
(e["outline-offset"]=d+"px",e["outline-radius"]="100 px")):e["outline-offset"]=d+"px";c(b).css(e);b.timer=setTimeout(function(){if(d>=f&&!a.repeat)return c(b).pulsate("destroy"),!1;if(d>=f&&!0!==a.repeat&&!isNaN(a.repeat)&&0<a.repeat)a.repeat-=1;else if(a.pause&&d>=f){var e=d+1;innerfunc=function(){g(a,b,e)};setTimeout(innerfunc,a.pause);return!1}g(a,b,d+1)},a.speed/f)};c.fn.pulsate=function(a){if(j[a])return j[a].apply(this,Array.prototype.slice.call(arguments,1));if("object"===typeof a||!a)return j.init.apply(this,
arguments); c.error("Method " + a + " does not exist on jQuery.pulsate")
}
})(jQuery);
var blackSelectForYcfNotify = function (s, c, ms) {
    if (c > 0) {
        $(s).css("color", "black");
        c--;
        setTimeout(function () {
            redSelectForYcfNotify(s, c, ms);
        }, ms);
    }
};
var redSelectForYcfNotify = function (s, c, ms) {
    if (c > 0) {
        $(s).css("color", "red");
        c--;
        setTimeout(function () {
            blackSelectForYcfNotify(s, c, ms);
        }, ms);
    }
};
var pulsateForYcfNotify = function (s) {
    $(s).each(function (i, ele) {
        var objTagName = ele.tagName.toLocaleLowerCase();
        if (i == 0) $(ele).focus();
        switch (objTagName) {
            case 'input':
            case 'a':
            case 'span':
            case 'div':
                {
                    $(ele).pulsate({
                        color: "#DC271D",
                        reach: 20,
                        repeat: 6,
                        speed: 1000,
                        glow: true
                    });
                } break;
            case 'select':
                {
                    var tds = "#s2id_" + ele.id;
                    console.log(tds);
                    if ($(tds).length > 0) {
                        var ts = tds + " a span:first";
                        redSelectForYcfNotify(ts, 12, 500);
                    }
                    else {
                        redSelectForYcfNotify(ele, 12, 500);
                    }
                } break;
        }
    });
}

3、调用方法进行页面动态提醒

比如下拉框文字闪烁:
下拉框元素id为selectProduct,则可以调用 pulsateForYcfNotify(“#selectProduct”);
因为封装好的方法是支持多元素的,所以,你可以传入多个元素,如:pulsateForYcfNotify(“#selectProduct,#selectUserId”);等,就是jquery选择器语法。

input文本框边框闪烁:
pulsateForYcfNotify(“#txtId1,#txtId2”);

使用非常简单吧,当然 ,你可以根据这个进行扩展,改成你自己喜欢的提醒样式完全是可以的,无非就是改变页面元素的外貌,使用各种醒目的颜色吸引眼球等等。

需要注意的是,为了方便调用,这里的javascript函数都是全局函数,当然得想一个独一无二的名称来防止函数名与其他函数冲突。

效果:
这里写图片描述

相关文章
|
17天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
56 21
|
18天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
48 16
|
13天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
39 9
|
16天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
18天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
17天前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
14天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
24 2
|
14天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
18天前
|
JavaScript
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件
|
16天前
|
JavaScript 容器
jQuery消息通知显示插件
MessageNotifyPlugin是一款简单的jQuery消息通知显示插件。该jQuery消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等
21 2