js代码以及js对象实现行走的小女该

基本思路:

小女孩从左边开始走,走到指定位置停下,这里终点设置为1000,实现这个动画先考虑简要的思路,初始化位置设置好后,关键作用在于当页面打开时,这个存放小女好图片的div要不停的向左移动,这里我们可以用一个定时器来按照固定时间执行,还需要在这个div移动过程中,边移动图片边改变,这里的图片用到的是精灵图,通过改变背景图片的位置来得到不同行走姿势的小女孩.

css代码:

 <style>
        div{
        //初始化这个存放图片的div,设置好小女孩最初的位置
            width:100px;
            height:100px;
            background: url("img/girl.png") no-repeat 0px -219px;
            position: relative;
            left: 100px;
            top:200px;
        }
    </style>

js核心代码:

<script>
	//获取到存放图片的div
    var box = document.querySelector(".box");
    //声明一个索引值,使用这个值来计数定时器执行了多少次,换对应的图片,这里图片一共7张
    var index = 0;
    var nowLeft = 0;//声明一个变量用来存放这个div不停向左移动累加得到的值
    //定时器
    var timer = setInterval(function () {
        nowLeft += 5;
        index++;
        //当大于7时,图片后面没有图片了,所以要重新从0开始,多以将index的值赋值为0,重新循环
        if(index>7){index = 0;}
        //设置一个移动的终点,当移动到这个点的时候停止移动,清除这个定时器
        if(nowLeft >= 1000){
            nowLeft =1000;
            clearInterval(timer);
        }
        //此时nowLeft 得到的是不断累加的值,将这个值赋值给div,就可以实现不断向右移动
        box.style.left = nowLeft +"px";
        //这里表示第一张小图的位置是79,index多少次就乘以这个次数得到往后以后的图片
        //负值表示这个小女孩向右移动,就说明这个大图要想左移动才可以出现小女孩后面行走图片
        box.style.backgroundPosition = -79*index + "px -219px";
    },30);
</script>

创建对象实现行走

上述这个方法当我们实现时只需要一个时可以使用,但当我们要多次创建一个div进行行走的时候,就要反复写重复的代码,如果要写100个上述的div,就要写100次来执行他,这个代码时非常繁琐的,所以为了灵活的使用这个方法,可以多次创建,可以将这个代码创建成一个对象,在对象中写对应的各种方法来实现,使用这个对象的时候,只需要new这个对象,传递对应的参数既可以实现.

css代码:

 <style>
        div{
            width:100px;
            height:100px;
            background: url("img/girl.png") no-repeat 0px -219px;
            position: absolute;
            left: 0px;
            top:0px;
        }
</style>

js核心代码:

<script>
	//创建一个对象
    function moveGirl(left,top){
    //this在对象中指对象本身,this.left表示当前传递进来的left值
        this.left = left;
        this.top = top;
        //声明一个变量用来给定时器
        this.timer = null;
        //初始化变量
        this.init = function () {
        	//创建一个div
            this.dom = document.createElement("div");
            //将这个div添加到body中
            document.body.appendChild(this.dom);
            //设置这个div的初始位置
            this.dom.style.left = this.left + "px";
            this.dom.style.top = this.top + "px";
        }
        //移动的方法,与另一种方法的结构是一致的
        this.move = function () {
            var index = 0;
            //这里要声明一个变量来存一下this的值
            //在定时器中this的是window的对象,当在定时器中使用this时原来存入的值为空
            var self = this;
            this.timer = setInterval(function () {
                index++;
                self.left += 5;
                if(index>7) index = 0;
                if( self.left >= 1000) self.over();
                self.dom.style.backgroundPosition = -79*index +"px -219px";
                self.dom.style.left = self.left + "px";
            },30);
        }
        //动画移动结束时的方法
        this.over = function () {
        	//清除定时器
            clearInterval(this.timer);
            //移除添加的这个div
            document.body.removeChild(this.dom);
        }
        //自己本身调用自己的初始化以及移动发的方法
        this.init();
        this.move();
    }
  		//在这个方法中使用对象只需要new一个这个对象就可以了
     	//new moveGirl(100, 0);
     	
     	//设置一个定时器让他在规定的范围内随机出现一个小女孩
        setInterval(function () {
            new moveGirl(0,parseInt(Math.random()*500));
        },100);
</script>