前端开发jQuery animate 扩展 颜色变化

电商前端开发框架
aul前端开发框架
十大前端开发框架有哪些

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <title>jquery animate 扩展 颜色变化</title>
        <style type=”text/css”>
            #test {
                background-color: red;
                position: absolute;
                top: 0;
                left: 0;
                width: 100px;
                height: 100px;
            }
        </style>
        <script
            type=”text/javascript”
            src=”http://code.jquery.com/jquery-1.11.1.min.js
        ></script>
        <script type=”text/javascript”>
            $.fn.animate = (function(animate) {
                var getColorArr = function(str) {
                    if (!str) return str
                    var arr = []
                    str = str.replace(/ /g, ”)
                    if (/^#[A-Fa-f0-9]{3,}$/.test(str)) {
                        if (!/^#[A-Fa-f0-9]{3}$|^#[A-Fa-f0-9]{6}$/.test(str)) {
                            console.error(‘Color code error’)
                            return arr
                        }
                        str = str.replace(
                            /^#([A-Fa-f0-9])([A-Fa-f0-9])([A-Fa-f0-9])$/,
                            ‘#$1$1$2$2$3$3’,
                        ) // #000 -> #000000 3位转6位;
                        arr = str
                            .replace(
                                /^#([A-Fa-f0-9]{2})([A-Fa-f0-9]{2})([A-Fa-f0-9]{2})$/,
                                ‘$1,$2,$3’,
                            )
                            .split(‘,’) // 十六进制 转 十进制 数组
                        $.each(arr, function(i, n) {
                            arr[i] = parseInt(n, 16)
                        })
                        return arr
                    }
                    arr = str
                        .replace(
                            /^rgba?\(([0-9]{1,3})(,[0-9]{1,3})(,[0-9]{1,3})(,?[0-9.]+)?\)$/i,
                            ‘$1$2$3$4’,
                        )
                        .split(‘,’) // rgb() 或 rgba 转数组;
                    $.each(arr, function(i, n) {
                        arr[i] = parseInt(n * 100) * 0.01
                    })
                    return arr
                }
                return function() {
                    if (arguments.length > 0) {
                        var speed = arguments[1],
                            easing = arguments[2],
                            step = 0.1
                        speed = speed ? speed : $.fx.speeds._default
                        speed = jquery.fx ? $.fx.speeds[speed] || speed : speed
                        easing = easing ? easing : ‘linear’
                        easing = $.type(easing) == ‘string’ ? easing : easing
                        var cssObj = arguments[0]
                        if ($.type(cssObj) == ‘object’)
                            for (k in cssObj) {
                                var time = speed * step
                                ;(thisObj = this),
                                    (str = cssObj[k]),
                                    (thisArr = []),
                                    (flags = [])
                                if (
                                    /^#[A-Fa-f0-9]{3,6}$|^rgba?\(.*\)$/.test(
                                        str,
                                    )
                                ) {
                                    var key = k
                                    var arr = getColorArr(str)
                                    var thisColor =
                                        thisObj.css(key) ||
                                        thisObj[0].style[key]
                                    var cArr = getColorArr(thisColor)
                                    if (cArr.length + 1 == arr.length)
                                        cArr.push(1)
                                    var interval = setInterval(function() {
                                        $.each(arr, function(i) {
                                            thisArr[i] =
                                                thisArr.length == i
                                                    ? cArr[i]
                                                    : thisArr[i]
                                            var p = arr[i] – cArr[i]
                                            var pos = $.easing[easing](p)
                                            var temp_pos =
                                                pos == p
                                                    ? p * step
                                                    : p * step + pos – 0.5
                                            thisArr[i] +=
                                                i < 3
                                                    ? Math.round(temp_pos)
                                                    : Math.round(
                                                            temp_pos * 100,
                                                     ) / 100
                                            if (
                                                (p < 0 &&
                                                    thisArr[i] < arr[i]) ||
                                                (p > 0 && thisArr[i] > arr[i])
                                            ) {
                                                thisArr[i] = arr[i]
                                                flags[i] = true
                                            }
                                        })
                                        var tempStr =
                                            thisArr.length == 4
                                                ? ‘rgba(‘
                                                : ‘rgb(‘
                                        tempStr += thisArr.join(‘,’) + ‘)’
                                        thisObj.css(key, tempStr)
                                        if (flags.length == thisArr.length)
                                            clearInterval(interval)
                                    }, time)
                                }
                                //其它扩展 if(/[A-Za-z0-9]+\([0-9.]+[A-Za-z]*\)/.test(str)) console.log(str);
                            }
                    }
                    return animate.apply(this, arguments)
                }
            })($.fn.animate)
            $(function() {
                $(‘#test’).animate(
                    { ‘background-color’: ‘#00f’, top: ‘200px’, left: ‘500px’ },
                    ‘slow’,
                    ‘linear’,
                )
            })
        </script>
    </head>
    <body>
        <div id=”test”></div>
    </body>
</html>

其它 animate 扩展 如旋转。
javascript 代码

$.fn.animate = (function(animate) {
    var getParam = function(str) {
            var arr = str.match(/([A-Za-z0-9]+)\(([0-9.-]+)[A-Za-z]*\)/i)
            if (!arr) return
            return { key: arr[1], val: arr[2] }
        },
        setParam = function(p, str) {
            var reg = new RegExp(p.key + ‘\\([0-9.-]+([A-Za-z]*)\\)’, ‘i’)
            return str.replace(reg, p.key + ‘(‘ + p.val + ‘$1)’)
        }
    return function() {
        if (arguments.length > 0) {
            var speed = arguments[1],
                easing = arguments[2],
                step = 0.1
            speed = speed ? speed : $.fx.speeds._default
            speed = jquery.fx ? $.fx.speeds[speed] || speed : speed
            easing = easing ? easing : ‘linear’
            easing = $.type(easing) == ‘string’ ? easing : easing
            var cssObj = arguments[0]
            if ($.type(cssObj) == ‘object’)
                for (k in cssObj) {
                    var time = speed * step,
                        thisObj = this,
                        str = cssObj[k]
                    if (/[A-Za-z0-9]+\([0-9.-]+[A-Za-z]*\)/.test(str)) {
                        console.log(str)
                        var pKey = k,
                            pStr = str,
                            thisP = {}
                        pStr =
                            ‘perspective(800px) rotateY(-45deg) rotateZ(22.5deg) ‘ +
                            pStr
                        var param = getParam(pStr)
                        var thisCss =
                            thisObj.css(pKey) || thisObj[0].style[pKey]
                        var cParam = getParam(thisCss)
                        cParam =
                            cParam && param.key == cParam.key
                                ? cParam
                                : { key: param.key, val: 0 }
                        var interval = setInterval(function() {
                            thisP.key = thisP.key ? thisP.key : cParam.key
                            thisP.val = thisP.val ? thisP.val : cParam.val
                            var p = param.val – cParam.val
                            var pos = $.easing[easing](p)
                            var temp_pos =
                                pos == p ? p * step : p * step + pos – 0.5
                            thisP.val += parseInt(temp_pos * 100) / 100
                            thisP.val =
                                (p > 0 && thisP.val > param.val) ||
                                (p < 0 && thisP.val < param.val)
                                    ? param.val
                                    : thisP.val
                            var tempStr = setParam(thisP, pStr)
                            thisObj.css(pKey, tempStr)
                            if (thisP.val == param.val) clearInterval(interval)
                        }, time)
                    }
                }
        }
        return animate.apply(this, arguments)
    }
})($.fn.animate)
开发中前端用的什么框架
前端vue框架开发
微信开发的前端框架
» 本文来自:前端开发者 » 《前端开发jQuery animate 扩展 颜色变化》
» 本文链接地址:https://www.rokub.com/7255.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!