Javascript linear gradient 2

Let's start with IE. This is the largest user group. If this part cannot be developed, you can say you don't need to do it. Although IE has a Gradient filter, its implementation is very weak compared with other browsers. There is no stop-color Gradient, and the angle Gradient cannot be achieved, and it often fails. My idea is this: if there is a DIV with text, to achieve multiple linear gradient, we must first extract the text in it, and then put a few divs in it, put a few duplicates, and then gradient them. If it is a vertical gradient, this is easy to do, nothing to do, just set its filter and each height on the line. If it is horizontal, let it float or absolute position, place it in the appropriate position, set its filter and width. But the gradient filter will expire after floating or positioning, which is unknown when the transparent filter is used. There is no way to sacrifice the ancient table. However, when setting the length and width, using style is not useful. You must use the DOM attribute. The gradient is the responsibility of its td element. CellPadding and cellSpacing are also used to remove the gaps between the table and td elements and between the td elements and their content. <Meta charset = "UTF-8"> <meta name = "keywords" content = "javascript linear gradient by situ zhengmei"> <meta name = "description" content = "javascript linear gradient situ zhengmei "> <br/> <style type =" text/css "> # gradient {width: 800px; height: 200px; border: 1px solid red ;} </style> <p> javascript linear gradient by situ zhengmei achieves multiple levels of gradient effect <p> the effect must be visible in IE! </P> <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

Safari, chrome, and opera are intended to be implemented using SVG. To reduce the length of the function, two auxiliary functions are specially designed.Copy codeCode: var createSVG = function (tag ){
Return document. createElementNS ("http://www.w3.org/2000/svg", tag );
};
Var attr = function (node, bag ){
For (var I in bag ){
If (bag. hasOwnProperty (I ))
Node. setAttribute (I, bag [I])
}
};
Var COSgradient = function (entity, stops, width, height, type ){
Var svg = createSVG ("svg ");
Attr (svg, {width: width + "px", height: height + "px "})
Entity. appendChild (svg );
.
Var defs = createSVG ("defs ");
Svg. appendChild (defs );
Var linearGradient = createSVG ("linearGradient ");
Defs. appendChild (linearGradient );
Attr (linearGradient, {id: "nasami", x1: "0%", y1: "0% "})
If (type ){
Attr (linearGradient, {x2: "100%", y2: "0% "})
} Else {
Attr (linearGradient, {x2: "0%", y2: "100% "})
}
For (var I = 0, j = 0, l = stops. length; I <l; I ++, j ++ ){
Var offset = stops [I]. split (",") [0] + "% ",
Color = stops [I]. split (",") [1],
Stop = createSVG ("stop ");
Attr (stop, {offset: offset, "stop-color": color });
LinearGradient. appendChild (stop );
}
Var rect = createSVG ("rect ");
Svg. appendChild (rect );
Attr (rect, {x: "0px", y: "0px", width: width + "px", height: height + "px", fill: "url (# nasami )"});
}

Firefox uses its private attributes:Copy codeThe Code is as follows: var FFgradient = function (entity, stops, width, height, type ){
Var cssText = "; background:-moz-linear-gradient ("
CssText + = type? "Top, bottom,": "left, right ,";
.
For (var I = 0, j = 0, l = stops. length; I <l; I ++, j ++ ){
Var offset = stops [I]. split (",") [0] + "% ",
Color = stops [I]. split (",") [1];
CssText + = "color-stop (" + [offset, color] + "),"
}
CssText = cssText. replace (/, $/, "") + ") no-repeat ;";
Entity.style.css Text = cssText + "width:" + width + "px; height:" + height + "px ;"
}

But today, I found that firefox still supports the linear gradient of SVG, So I corrected my original point of view. The above function is only used here as an implementation method, and it is not integrated into my final version (although it is much shorter than SVG implementation .) In this way, we can also achieve linear gradient in earlier firefox versions.
The gradient effect in the following running box can be normally used in all mainstream browsers.<Meta charset = "UTF-8"> <meta name = "keywords" content = "javascript linear gradient by situ zhengmei"> <meta name = "description" content = "javascript linear gradient situ zhengmei "> <br/> <style type =" text/css "> # gradient {width: 800px; height: 100px; border: 1px solid red ;} </style> <p> javascript linear gradient by situ zhengmei achieve multi-level gradient effect <p> https://developer.mozilla.org/en/SVG/Tutorial/Fill_Stroke_and_Gradients </p> <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

Make it a class. Brief description: The first parameter is IE, and the second parameter is hash. All parameters in the hash are required. The unit of width and height is px. If type is 0 or 1, 0 indicates vertical, 1 indicates horizontal, and color-stop indicates gradient, it is composed of a string array. Each string is composed of numbers plus commas (,) and color values. It represents the offset of the number table, in %. The color value can be red or green, it can also be a hash value of six or three digits. You must have at least one gradient.Copy codeThe Code is as follows: new Gradient ("gradient", {width: 800, height: 100, type: 0, "color-stop": ["0, red ",
3. "16, orange", "32, yellow", "48, green", "64, blue", "80, indigo", "100, violet"]})

<Meta charset = "UTF-8"> <meta name = "keywords" content = "javascript linear gradient by situ zhengmei"> <meta name = "description" content = "javascript linear gradient situ zhengmei "> <br/> <style type =" text/css ">. gradient {width: 800px; height: 100px ;} </style> <p> javascript linear gradient by situ zhengmei achieves multiple horizontal gradient effects javascript linear gradient by situ zhengmei achieves multiple vertical gradient effects <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]