0

如何使背景图像滑动流畅？请参阅下面的尝试：

<!DOCTYPE html>
<meta charset="utf-8">
<title>Slide backgroundPosition SMOTH</title>
<style>
#div1 {
    -webkit-transition:background-position 0.1s ease-in-out;
    -moz-transition:background-position 0.1s ease-in-out;
    -o-transition:background-position 0.1s ease-in-out;
    -ms-transition:background-position 0.1s ease-in-out;
    transition:background-position 0.1s ease-in-out;
    height:300px;
    background:url("https://www.google.se/images/srpr/logo4w.png") 0 center repeat-x
}
</style>

<script>
window.onload = function(){
    var div1 = document.getElementById('div1');
    var position = 1;

    function slideBackgroundPosition() {
        div1.style.backgroundPosition = '-' + position + 'px';
        position += 1;
    }

    setInterval(slideBackgroundPosition, 100);
};
</script>

<div id=div1></div>
4

0 回答 0