在IE 11中更改图像的幻灯片速度无法正常工作,使用JS更新CSS动画属性
**此function用于控制脉冲速度动画,它适用于所有浏览器,IE 11和Edge(Windows 10)除外,脉冲速度没有正确降低。 **
样式使用javascript动态变化,但样式更改的效果并未反映在IE 11和Edge浏览器的脉冲速度动画中。
function getPulseSpeed(param){ var speed= 3.5; var element = document.getElementById("slideright"); var style = element.style; style.webkitAnimationPlayState = style.mozAnimationPlayState = style.oAnimationPlayState = style.animationPlayState = "paused"; if(param == 0){ speed = 3.5; style.webkitAnimationDuration = style.mozAnimationDuration = style.oAnimationDuration = style.animationDuration = speed + "s"; style.animationName = "x"; }if(param == 1){ speed = 2.5; style.webkitAnimationDuration = style.mozAnimationDuration = style.oAnimationDuration = style.animationDuration = speed + "s"; style.animationName = "x"; } if(param == 2){ speed = 1.5; style.webkitAnimationDuration = style.mozAnimationDuration = style.oAnimationDuration = style.animationDuration = speed + "s"; style.animationName = "x"; } if(param ==3){ speed = 1; style.webkitAnimationDuration = style.mozAnimationDuration = style.oAnimationDuration = style.animationDuration = speed + "s"; style.animationName = "x"; } if(param >=4){ speed = 0.5; style.webkitAnimationDuration = style.mozAnimationDuration = style.oAnimationDuration = style.animationDuration = speed + "s"; } setTimeout(function(){ style.animationName = ""; },0); style.webkitAnimationPlayState = style.mozAnimationPlayState = style.oAnimationPlayState = style.animationPlayState = "running"; }
.slide-right{ z-index: 2; width: 125px; height: 71px; background-image: url(http://sofzh.miximages.com/javascript/photo.jpg?sz=125); /* -webkit-animation: slide 2s linear infinite; animation: slide 2s linear infinite; */ animation-name: slide; animation-duration: 3.5s; animation-iteration-count: infinite; animation-timing-function: linear; background-repeat: repeat; animation-play-state: running; left: 45px; } @-webkit-keyframes slide { from { background-position: 0 0; } to { background-position: -125px 0; } } @keyframes slide { from { background-position: 0 0; } to { background-position: -125px 0; } }
谢谢。
- 为什么jQuery的承诺有一个done(),但Mozilla记录的Javascript承诺不是? 如果我想在JS中有一个done()怎么办?
- AngularJS:想要在点击一次时禁用该链接
- LinkedIn分享按钮仅出现在AngularJS应用程序的初始加载中
- 强制AngularJS在使用多个版本的jQuery时使用特定版本的jQuery
- 如何在AngularJS控制器中调用javascript函数?
- 如何通过#ID 100%AngularJS获取元素SELECT中的Text和Value
- 如何调用由jQuery事件触发的Angular组件内的函数?
- 在ng-repeat中的Jquery传递效应
- angularjs if / else语句和窗口宽度