jquery动画 -- 7.会移动的背景，讲解div+css动画原理

2022-03-12 15:27:03

　　今天课程介绍的是移动的背景，顺便讲解下div+css动画的原理。首先还是先介绍如何制作移动的背景效果。

　　html代码比较简单，我就全贴出来了，稍后介绍js的实现。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        header
        {
            display: block;
            width: 660px;
            height: 380px;
            margin: auto;
            background: url(img/header.jpg) repeat 0 0;
        }
    </style>
</head>
<body>
    <header>
    </header>
</body>
</html>

　　页面里面包含一个header标签，设置了他的css效果，指定了css背景图片和图片的偏移量。接下来我们要做的就是，通过修改背景偏移量来实现背景移动的效果。这里我们要使用到css的background-position属性。大家可以到 http://www.w3school.com.cn/css/pr_background-position.asp，了解相关信息。

　　我们看到上面css中定义了 background: url(img/header.jpg) repeat 0 0; 其中的0 0就是背景图片的定位信息，我们接下来就是通过修改第一个0，来实现背景图片向左移动的动画效果。如果想实现相上下移动的效果，需要修改第二个0。我们来看js代码：

//获取header对象
var header = $('header');
//设置背景初始值
header.css('backgroundPosition', '0 0');

//定义动画函数
var bgscroll = function () {
    //获取当前x轴位置
    var current = parseInt(header.css('backgroundPosition').split(' ')[0]),
    //设置新位置
    newBgPos = (current - 1) + 'px 0px';
    //将变量赋值给css的background-position属性
    header.css('backgroundPosition', newBgPos);
};

//定义循环
setInterval(bgscroll, 75);

　　代码很简单，就是定义一个循环事件，每隔75毫秒去执行一次bgscroll，bgscroll每次获取背景当前的x轴位置，执行-1操作，再把新值赋给css的background-position属性。连贯的执行bgscroll函数的结果就是，背景图片不断的向左移动。如果想实现向右移动，需要把-1的操作修改成+1操作。

　　其实div+css动画的原理很简单（这里讲的不是利用css的transition来实现动画），就是通过设置setInterval每隔几毫秒执行一个动画函数（有了setInterval就能实现自动的效果；当然你也可以不去设置setInterval而去设置某个html元素的click等事件，该事件里面去执行动画函数，这样就实现了手工动画的效果）。动画函数要做的就是去修改html元素的css属性值，有时候是修改background-position，更多的时候是修改left或者top属性值。通过对他们进行增减的操作，就实现了html元素在页面中上下左右位置的变化。left属性值可以参考这个站点：http://www.w3school.com.cn/css/pr_pos_left.asp。

　　当然，光对html元素的left，top进行赋值有时候是不够的，根据情况的需要可能还需要对他们的position属性进行操作，以达到合理的布局效果。大家可以参照这里学习position属性：http://www.w3school.com.cn/css/css_positioning.asp。

　　把position，left等css属性掌握透彻，返回头再去看这个系列之前的文章，我想你一定能明白之前的动画是如何实现的了。

　　希望这篇文章对你理解jquery动画效果的实现由一定的帮助作用。demo下载地址：jquery.animate.animated-header.rar

码农公寓

相关文章