JS实现的动态背景渐变

首先你需要一个放置图片的 div  

<div id="scrollBackground" style="height: 150px; background-image: url(../images/hfbg.jpg);
        background-attachment: initial; background-origin: initial; background-clip: initial;
        background-color: initial; background-position: 0px -1925px; background-repeat: no-repeat no-repeat;">
    </div>

然后需要一段js 设置时间 

<script type="text/javascript">    // hf Background scroll
    window.onload = function () {
        var scrollBackground = {
            object: document.getElementById("scrollBackground"),
            endTop: 3657,
            nowTop: 0
        };
        var scrollInterval = setInterval(function () {
            scrollBackground.nowTop = (scrollBackground.nowTop != scrollBackground.endTop) ? (scrollBackground.nowTop + 1) : 0;
            scrollBackground.object.style.backgroundPosition = "0px -" + scrollBackground.nowTop + "px";
        }, 50);
    }
</script>

然后就搞定了 div 高度可以自己改 无所谓  宽度最大支持1680