js+jquery实现标签背景渐变颜色,支持大部分浏览器

说明:需要先加载jquery库

$(function() {
 
 // refreshGradient("#main_operation","#3073e5","#2d9ae6",3);//div背景颜色渐变
});
/*********************************
 * 设置标签背景渐变
 * @param divId  标签 、 id 、className
 * @param color1  渐变开始颜色
 * @param color2  渐变结束颜色
 * @param type	  渐变类型   1=左到右,2=上到下,3=左上到右下,4=左上到右上
 */
function refreshGradient(divId,color1,color2,type) {
	var col1 = "#ffffff";
	var col2 = "#3074e5";
	var div = "body";
	if(divId != null){
		div = divId;
	}
	if(color1 != null){
		col1 = color1;
	}
	if(color2 != null){
		col2 = color2;
	}
	var showType = "to right bottom";//默认左上角到右下角
	switch (type) {
	case 1:
		showType = "to right";
		break;
	case 2:
		showType = "to top";
		break;
	case 3:
		showType = "to right bottom";
		break;
	case 4:
		showType = "to right top";
		break;
	default:
	break;
	}
  var gradientBody = "linear-gradient("+showType+", " +col1+ ", " + col2 + ")";
  $.each(["", "-o-", "-moz-", "-webkit-", "-ms-"], function() {
    $(div).css({ 'background': this + gradientBody });
  });
}


你可能感兴趣的:(2017-12,html,javascript)