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