<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

<style>

    * {

        margin:0;

        padding:0;

    }

    html,body {

        height:100%;

    }

    div.girl {

        width:79px;

        height:108px;

        background:url(aisidier.png) 0 -216px no-repeat;

        position:absolute;

    }

    div.end {

        border:2px solid #000;

        position:absolute;

        left:1000px;

        top:0;

        height:100%;

    }

</style>

</head>

<body>

    <div class="end"></div>

    <script>

        var girls = [];

        function Girls(){

            this.x = 0;

            this.y = parseInt(Math.random()*(document.documentElement.clientHeight - 108));

            this.speed = parseInt(Math.random()*10)+1;

            this.step = 0;

            this.isMove = true;

            this.init();

            this.update();

            this.bindEvent();

            girls.push(this);

        }

        Girls.prototype.init  = function(){

            this.dom = document.createElement('div');

            this.dom.className = "girl";

            document.body.appendChild(this.dom); //上树

        };

        Girls.prototype.update = function(){

            if(!this.isMove)

                return;

             this.x += this.speed;

            if(this.x > 1000){

                this.goDeid();

            }

            this.step++;

            if(this.step > 7){

                this.step = 0;

            }

            this.dom.style.left = this.x+"px";

            this.dom.style.top = this.y+"px";

            console.log("left:",this.dom.style.left ,"top:",this.dom.style.top);

            this.dom.style.backgroundPosition = -this.step*79+"px -216px";

        };

        Girls.prototype.goDeid = function(){

            document.body.removeChild(this.dom); //下树

            for(var i=0;i<girls.length;i++){

                if(girls[i] == this){

                    girls.splice(i,1);

                }

            }

        };

        Girls.prototype.bindEvent = function(){

            var _this = this;

            this.dom.onclick = function(){

                _this.isMove = !_this.isMove;

            };

        };

        setInterval(function(){

            for(var i=0;i<girls.length;i++){

                girls[i].update();

            }

        },100);

        new Girls();

        new Girls();

        new Girls();

        new Girls();

        new Girls();

        new Girls();

    </script>

</body>

</html>

图片在文件中

js 行走的小女孩 面向对象的更多相关文章

  1. js是函数式的面向对象编程语言

    js是函数式的面向对象编程语言,而非类式的面向对象编程语言

  2. js的this和面向对象编程

    很奇怪的是很多书或资料没有把这个事情讲清楚. 关键就是在于没有一个整体的思维技术模式,问题被隔离了所以反而不容易理解. 我们先看this,这是js的关键字,指示函数的上下文对象. 这里问题就来了,比如 ...

  3. js之作用域和面向对象

    作用域 JavaScript以函数为作用域 函数的作用域在函数未被调用之前,已经创建 函数的作用域存在作用域链,并且也是在被调用之前创建 示例一 xo = "alex"; func ...

  4. JS高级学习路线——面向对象进阶

    构造函数进阶 使用构造函数创建对象 用于创建对象 其除了是一个函数之外,我们又称之为构造对象的函数 - 简称构造函数 function Product(name,description){ //属性 ...

  5. 谈一谈原生JS中的【面向对象思想】

           [重点提前说:面向对象的思想很重要!]         最近开始接触学习后台的PHP语言,在接触到PHP中的面向对象相关思想之后,突然想到之前曾接触的JS中的面向对象思想,无奈记性太差, ...

  6. [js高手之路]面向对象版本匀速运动框架

    这篇文章的效果,需要看过以下3篇文章: [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 ...

  7. js常见知识点3.面向对象之继承、设计模式

    一.面向对象的三大特征 建议回复: 封装:屏蔽内部细节.调用外部接口实现对应功能(函数调用) 继承:子类继承父类中的属性和方法 多态(js中不存在多态的概念) 二.继承 建议回复: 继承:子类继承父类 ...

  8. js常见知识点2.面向对象相关

    一.对象的概念 建议回复: 对象是一个整体,对外提供一些功能. 一切具有属性和方法的事物. 一切具有本质特征和行为的物质. 数据类型:       所有的基本数据类型都没有属性和方法.       所 ...

  9. canvas+js绘制序列帧动画+面向对象

    效果: 素材: 源码:(一般的绘制方式) <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. nevertheless|magnificent |prosperous|

    ADV 然而;不过You use nevertheless when saying something that contrasts with what has just been said. Mos ...

  2. Java发送Post请求,参数JSON,接收JSON

    /** * 发送post请求 * @param url 路径 * @param jsonObject 参数(json类型) * @param encoding 编码格式 * @return * @th ...

  3. labview的bool（布尔）按键机械属性

    在学习LabVIEW(简称LV)时,布尔控件是常用的控件.布尔控件分为按钮型控件和开关型控件,LV内部并没有区分按钮型还是开关型.这两种布尔控件可以根据需要相互转换,通过配置布尔控件的机械动作属性来实 ...

  4. unittest（22）- p2p项目实战（4）-read_config

    # 4. read_config.py import configparser class ReadConfig: @staticmethod def get_config(file_path, se ...

  5. bzoj1432_[ZJOI2009]Function

    题目描述 有n 个连续函数fi (x),其中1 ≤ i ≤ n.对于任何两个函数fi (x) 和fj (x),(i != j),恰好存在一个x 使得fi (x) = fj (x),并且存在无穷多的x ...

  6. 吴裕雄--天生自然KITTEN编程：拾金币

  7. git创建/合并分支/删除分支/将修改后的内容同步到GitHub远程仓库

    1.创建分支并切换到刚创建的分支(这里创建新的分支来修改README.md的内容然后将创建的分支与master分支合并,最后删除创建的分支) $ git checkout -b 分支名 Switche ...

  8. python 内置方法、数据序列化

    abc(*args, **kwargs) 取绝对值 def add(a,b,f): return f(a)+f(b) res = add(3,-6,abs) print(res) all(*args, ...

  9. SpringMVC之添加照片并修改照片名字

    @RequestMapping(value="/addIdcardsSubmit",method={RequestMethod.POST,RequestMethod.GET}) p ...

  10. Ansible(一) Try it - 枯鱼的博客

    学习ansible的最好方式就是使用,先别管什么inventory,playbook,module这些.按照安装文档安装,然后try it,一边学一边体验,这样的速度是最快的.当熟悉了之后,想要深入就 ...