我怎么能有一个自动渐变背景使用JavaScript,它适用于最新版本的Internet Explorer
How could I have an auto-gradient background using JavaScript that works with latest version of Internet Explorer?
>前,我在自动渐变背景的Codepen上发现了这个例子,
var colors = new Array(
[62,35,255],
[60,255,60],
[255,35,98],
[45,175,230],
[255,0,255],
[255,128,0]);
var step = 0;
//color table indices for:
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];
//transition speed
var gradientSpeed = 0.002;
function updateGradient()
{
if ( $===undefined ) return;
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];
var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";
var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";
$('#gradient').css({
background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
step += gradientSpeed;
if ( step >= 1 )
{
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];
//pick two new target color indices
//do not pick the same as the current one
colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
}
}
setInterval(updateGradient,10);
但是它不适用于Internet Explorer。由于我需要在工作中使用它,但我对 JavaScript 不够熟悉,有没有好的能够实现这一目标?
您的问题是您的代码使用供应商前缀的属性,因此此代码:
$('#gradient').css({background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
应该改成这样:
$('#gradient').css({background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"}).css({background: "linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"}).css({background: "-ms-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
请参阅:http://caniuse.com/#search=linear-gradient
所有现代浏览器都使用此 CSS 语法:
background: linear-gradient(to right, rgba(255, 0, 0, 1.0), rgba(0, 0, 0, 1.0));
我认为将您的代码更改为此代码应该适用于现代浏览器:
$('#gradient').css({
background: "linear-gradient(to right, "+color1+" 0%, "+color2+" 100%)"});
这应该适用于:
- IE10+
- 铬 26+
- 火狐 16+
- 野生动物园 6.1+
相关文章:
- AddEventListener适用于浏览器,但不适用于Android
- 查找仅适用于原始图像的图像放大算法的名称
- 如何在category.php中执行jquery,这应该适用于类别wordpress中的每个帖子
- Web编程,简单但适用于机器人项目
- JavaScript不适用于internet explorer和Firefox,但适用于谷歌
- Jquery事件处理程序仅适用于匿名函数
- jQuery调整大小函数只适用于窗口
- 火灾在卸载前确认警报仅适用于外部站点
- EmberJS-适用于各种模型的适配器动态名称空间
- Facebook共享链接适用于用户,但不适用于粉丝页面管理员
- jQuery-适用于移动设备的多级菜单
- 循环中的切换脚本只适用于第一次迭代
- 为什么setTimeout适用于无休止的递归调用
- 我未保存的更改指令需要适用于具有不同名称的所有表单
- 适用于多种浏览器的Selenium-需要能够执行javascript的webDriver
- Sails.js/Waterline.add()和.remove()仅适用于第二次调用
- Kadane 的最大子数组算法是否适用于所有正整数数组?
- AngularJS 1.3-为什么表单在加载时有效,适用于长度最小的输入
- 嵌套的悬停事件,仅适用于最直接的悬停元素
- 我如何使这个JavaScript只适用于最小宽度为1036px的浏览器上的用户