jQuery 实现背景的滚动

原理很简单,设置一个定时器,然后不断地改变背景图片的background-position属性。不多说

<code>var scrollSpeed = 70; //速度 当然是毫秒了
var step = 1; //每次变化的量,也就是变化1px
var current = 0; //一个变量,设定初始值
var imageWidth = 2247;    //索性这个宽度很大
var headerWidth = 800;    //高也很高
var restartPosition = -(imageWidth - headerWidth);    //当循环完时 充值起始点
function scrollBg() { //这是一个函数
    current -= step; //这里是减 若果想向相反地方向,那么把减换成加就行了。
    if (current == restartPosition) {    //循环重置
        current = 0; //重置个0吧
}
$('#body').css("background-position",current+"px 0");}  //关键在这里,你应该知道background-position怎么用,那你就明白了。给body 添加background-position属性。
var init = setInterval("scrollBg()", scrollSpeed); //核心源码 setInterval定时器,这个可是好东西,

</code>

那么你的CSS属性就应该这样写了~

<code>body{
background: url("images/bj.jpg") repeat scroll 0 0 #0C1319;}
</code>

0 thoughts on “jQuery 实现背景的滚动
添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。