闲来无事用JS写了一个颜色渐变demo

<html>
	<head>
		<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
		<style type="text/css">
			#show{
				width:200px;
				height:200px;
			}
		</style>
	<head>
	<body>
		<div id="show"></div>
	<body>
	<script type="text/javascript">
	
		var int=self.setInterval("changeColor()",20);
		$('#show').css('background-color','#'+Math.floor(Math.random()*16777215).toString(16));
		
		function changeColor(){
			var result = getRGB($('#show').css('background-color'));
			if(result[2]<255){
				result[2]=result[2]+1;
			}else if(result[1]<255){
				result[1]=result[1]+1;
			}else if(result[0]<255){
				result[0]=result[0]+1;
			}
			var newHex = result[0].toString(16)+result[1].toString(16)+result[2].toString(16);
			$('#show').css('background-color','#'+newHex);
		}
		
		
		function getRGB(color) {
			var result;

			if ( color && color.constructor == Array && color.length == 3 )
				return color;

			if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
				return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];

			if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
				return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];

			if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
				return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];

			if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
				return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];

			return colors[jQuery.trim(color).toLowerCase()];
		}
	</script>
</html>

 

 

 提取颜色的这个方法是网上搜到的一个animation的插件里面用到的,直接拿来主义了。

 

仅供娱乐,请勿乱踩,乱踩砍脚。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值