CSS / Javascript如何在Firefox中做这个背景位置电影，就像它在IE7 +？

问题描述

<script language="javascript" >
  var speed=25; //speed
  var num=0;
  var photos = document.getElementById('head_image');
  function scrollBG() {
    num++;
    photos.style.backgroundPosition="0"+num;
  }
  setInterval('scrollBG()',speed);
</script>

这是有问题的网站：www.theorymarine.com

This is the site in question: www.theorymarine.com

推荐答案

您需要一个CSS长度的单位。

You need a unit for CSS lengths.

photos.style.backgroundPosition= num+'px 0';

您可能还希望将动画放在时间上，开启速度或浏览器性能。例如：

You might also prefer to base your animation on the time, so that the rate it moves is not dependent on ‘speed’ or browser performance. eg.:

<script type="text/javascript">
    var photos= document.getElementById('head_image');
    var begin= new Date().getTime();
    setInterval(function() {
        var x= Math.floor((new Date().getTime()-begin)/25);
        photos.style.backgroundPosition= x+'px 0';
    }, 25);
</script>

这篇关于CSS / Javascript如何在Firefox中做这个背景位置电影，就像它在IE7 +？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！