当前位置: 首页 > news >正文

jQuery效果之jQuery Color animation 色彩动画扩展

jQuery 的动画方法(animate)支持各种属性的过渡,但是默认并不支持色彩的过渡,该插件正是来补足这一点!

PS: 该插件支持 RGBA 颜色的过渡,但是请注意,IE8以下的版本不支持 RGBA 颜色

支持以下属性:
  • color
  • backgroundColor
  • borderColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • outlineColor

使用方法:

载入 JavaScript 文件

首页页面中引入你的JQ版本,然后引入下面的插件代码:

<script src='jquery.animate-colors.js'></script>

调用方式:

$('#demodiv').animate({ color:'#E4D8B8' })
$('#demodiv').animate({ backgroundColor:'#400101' })
$('#demodiv').animate({ borderBottomColor:'#00346B' })
$('#demodiv').animate({ borderColor:'#F2E2CE' })
$('#demodiv').animate({ color:'rgba(42, 47, 76, 0.1)' })

下面贴一下不同的jquery版本,使用该插件的版本不一样,如下:

jQuery Animate colors (适用于 jQuery 1.8 以上版本):《下载地址》

jQuery Animate colors (适用于 jQuery 1.7.2 以下版本):《下载地址》

这儿贴一下适用于jquery1.8以上版本的源码:

(function($) {
    /**
     * Check whether the browser supports RGBA color mode.
     *
     * Author Mehdi Kabab <http://pioupioum.fr>
     * @return {boolean} True if the browser support RGBA. False otherwise.
     */
    function isRGBACapable() {
        var $script = $('script:first'),
                color = $script.css('color'),
                result = false;
        if (/^rgba/.test(color)) {
            result = true;
        } else {
            try {
                result = ( color != $script.css('color', 'rgba(0, 0, 0, 0.5)').css('color') );
                $script.css('color', color);
            } catch (e) {
            }
        }

        return result;
    }

    $.extend(true, $, {
        support: {
            'rgba': isRGBACapable()
        }
    });

    var properties = ['color', 'backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'outlineColor'];
    $.each(properties, function(i, property) {
        $.Tween.propHooks[ property ] = {
            get: function(tween) {
                return $(tween.elem).css(property);
            },
            set: function(tween) {
                var style = tween.elem.style;
                var p_begin = parseColor($(tween.elem).css(property));
                var p_end = parseColor(tween.end);
                tween.run = function(progress) {
                    style[property] = calculateColor(p_begin, p_end, progress);
                }
            }
        }
    });

    // borderColor doesn't fit in standard fx.step above.
    $.Tween.propHooks.borderColor = {
        set: function(tween) {
            var style = tween.elem.style;
            var p_begin = [];
            var borders = properties.slice(2, 6); // All four border properties
            $.each(borders, function(i, property) {
                p_begin[property] = parseColor($(tween.elem).css(property));
            });
            var p_end = parseColor(tween.end);
            tween.run = function(progress) {
                $.each(borders, function(i, property) {
                    style[property] = calculateColor(p_begin[property], p_end, progress);
                });
            }
        }
    }

    // Calculate an in-between color. Returns "#aabbcc"-like string.
    function calculateColor(begin, end, pos) {
        var color = 'rgb' + ($.support['rgba'] ? 'a' : '') + '('
                + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ','
                + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ','
                + parseInt((begin[2] + pos * (end[2] - begin[2])), 10);
        if ($.support['rgba']) {
            color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1);
        }
        color += ')';
        return color;
    }

    // Parse an CSS-syntax color. Outputs an array [r, g, b]
    function parseColor(color) {
        var match, triplet;

        // Match #aabbcc
        if (match = /#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(color)) {
            triplet = [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16), 1];

            // Match #abc
        } else if (match = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(color)) {
            triplet = [parseInt(match[1], 16) * 17, parseInt(match[2], 16) * 17, parseInt(match[3], 16) * 17, 1];

            // Match rgb(n, n, n)
        } else if (match = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) {
            triplet = [parseInt(match[1]), parseInt(match[2]), parseInt(match[3]), 1];

        } else if (match = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9\.]*)\s*\)/.exec(color)) {
            triplet = [parseInt(match[1], 10), parseInt(match[2], 10), parseInt(match[3], 10),parseFloat(match[4])];

            // No browser returns rgb(n%, n%, n%), so little reason to support this format.
        }
        return triplet;
    }
})(jQuery);

官网地址:https://bitstorm.org/jquery/color-animation/

转载于:https://www.cnblogs.com/moqiutao/p/8036012.html

相关文章:

  • Qt---自定义界面之QStyle
  • 再学习之Spring(面向切面编程).
  • java:解决eclipse配置Tomcat时找不到server选项
  • Qt532.QSettings_默认分隔符
  • python 高阶函数三 filter()和sorted()
  • bzoj1036[ZJOI2008]树的统计Count 树链剖分+线段树
  • 自然语言处理入门学习(一)
  • 文件和目录权限chmod 更改所有者和所属组chown umask 隐藏权限lsattr/chattr
  • 面向对象java知识汇总题
  • PAT 1023.组个最小数
  • mongodb for windows安装
  • 【比赛】NOIP2017 宝藏
  • gdb调试多线程程序总结
  • Excel2016通过宏生成拼音码
  • Web离线应用解决方案——ServiceWorker
  • [deviceone开发]-do_Webview的基本示例
  • Angular 2 DI - IoC DI - 1
  • CSS3 聊天气泡框以及 inherit、currentColor 关键字
  • Elasticsearch 参考指南(升级前重新索引)
  • ES2017异步函数现已正式可用
  • Intervention/image 图片处理扩展包的安装和使用
  • java2019面试题北京
  • LintCode 31. partitionArray 数组划分
  • Next.js之基础概念(二)
  • python学习笔记-类对象的信息
  • Python中eval与exec的使用及区别
  • ucore操作系统实验笔记 - 重新理解中断
  • 飞驰在Mesos的涡轮引擎上
  • 开发了一款写作软件(OSX,Windows),附带Electron开发指南
  • 删除表内多余的重复数据
  • 携程小程序初体验
  • #{}和${}的区别是什么 -- java面试
  • (30)数组元素和与数字和的绝对差
  • (31)对象的克隆
  • (java版)排序算法----【冒泡,选择,插入,希尔,快速排序,归并排序,基数排序】超详细~~
  • (笔试题)分解质因式
  • (编程语言界的丐帮 C#).NET MD5 HASH 哈希 加密 与JAVA 互通
  • (分布式缓存)Redis哨兵
  • (附源码)springboot教学评价 毕业设计 641310
  • .net core 控制台应用程序读取配置文件app.config
  • .NET Core日志内容详解,详解不同日志级别的区别和有关日志记录的实用工具和第三方库详解与示例
  • .NET Framework 4.6.2改进了WPF和安全性
  • .net 程序 换成 java,NET程序员如何转行为J2EE之java基础上(9)
  • .NET/ASP.NETMVC 深入剖析 Model元数据、HtmlHelper、自定义模板、模板的装饰者模式(二)...
  • .net快速开发框架源码分享
  • .NET面试题解析(11)-SQL语言基础及数据库基本原理
  • .NET牛人应该知道些什么(2):中级.NET开发人员
  • .Net中的集合
  • .stream().map与.stream().flatMap的使用
  • []FET-430SIM508 研究日志 11.3.31
  • [2010-8-30]
  • [2021 蓝帽杯] One Pointer PHP
  • [2024最新教程]地表最强AGI:Claude 3注册账号/登录账号/访问方法,小白教程包教包会
  • [bzoj1006]: [HNOI2008]神奇的国度(最大势算法)
  • [C# 开发技巧]实现属于自己的截图工具