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

电商前端开发框架

aul前端开发框架

十大前端开发框架有哪些

html 代码

<!DOCTYPE html>

<html>

<head>

<title>jquery animate 扩展颜色变化</title>

#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>

$.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>

</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 扩展颜色变化

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发