<!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. SQL中的一些关键字用法

    1.where 条件筛选结果 select * from `表名` where `列名`='value' 上诉语句的意思是在某表中查询某列名等于某特定值得所有列 2.Like 模糊查询 select ...

  2. CentOS 5.5 --学习（1）

    一.解决浏览器乱码问题: 用yum 安装 yum  -y  install  fonts-chinese yum  -y  install  fonts-ISO8859-2-75dpiCentOS系统 ...

  3. Java 9 新特性 – 内部类的方块操作符

    方块操作符 ( <> ) 在 Java 7 中就引入了,目的是为了使代码更可读. 但是呢,这个操作符一直不能在匿名内部类中使用 Java 9 修正了这个问题,就是可以在匿名内部类中使用方块 ...

  4. ISBN|方正|超星|The national academies press|OECD|RSC|Springer Link|Knovel|Encyclopedia Britannica

    图书使用图书分类号ISBN作为图书的ID 大英百科全书(Encyclopedia Britannica)可用于找寻关键词或关键词相关信息,便于构建准确的检索式: Knovel:可使用物理化学性质查找相 ...

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

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

  6. 吴裕雄--天生自然HTML学习笔记：HTML - XHTML

    XHTML 是以 XML 格式编写的 HTML. 什么是 XHTML? XHTML 指的是可扩展超文本标记语言 XHTML 与 HTML 4.01 几乎是相同的 XHTML 是更严格更纯净的 HTML ...

  7. 最长递增子序列-dp问题

    Longest Increasing Subsequence The longest increasing subsequence problem is to find a subsequence o ...

  8. jdk源码理解-String类

    String类的理解 简记录一下对于jdk的学习,做一下记录,会持续补充,不断学习,加油 1.String的hash值的计算方法. hash值的计算方法多种多样,jdk中String的计算方法如下,比 ...

  9. 使用nodeJs安装Vue-cli并用它快速构建Vue项目

    部分摘自:http://www.cnblogs.com/wisewrong/p/6255817.html(已在本地测试) 前提:nodeJs本地已安装. 一.安装 vue-cli 1.使用nodeJs ...

  10. iOS 编程：NSURLSession

    定义:描述 Foundation 框架类在标准的网络传输协议下,用 URLs 连接因特网并与服务器交互的一整套体系. 支持的传输协议: File Transfer Protocol (ftp://) ...