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

  今天课程介绍的是移动的背景,顺便讲解下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

posted @ 2012-08-31 09:28  下一站永远  阅读(5236)  评论(3编辑  收藏  举报