<!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. leetcode第22题：括号生成

    力扣上的题目可以大致分为以下种类: 对某种复杂规则的彻底解析,很有可能要构造状态机,充分考虑边界情况. 对某种数据结构及算法的应用. 对数学概念.遍历.动态规划等的综合应用. 通过分析,本题应该属于1 ...

  2. java String、StringBuilder

    Java中的String和StringBuilder类: 1.String对象是不可变的.每一个看起来修改了String值的方法,实际上都是创建了全新的String对象.代码示例如下: String ...

  3. 最简化的DirectX 11开发环境的配置 VS2010

    转载自:http://blog.csdn.net/zhmxy555/article/details/7672101 在编写基于DirectX 11的应用程序之前,我们当然需要在IDE中加入Direct ...

  4. SpringSecurity 如何提示错误

    1.可以通过authentication-failure-url="/login.html?error=1" 前端接收参数,根据参数提示 错误 2.前端vue this.myNam ...

  5. Spring Boot 之 Redis详解

    Redis是目前业界使用最广泛的内存数据存储. Redis支持丰富的数据结构,同时支持数据持久化. Redis还提供一些类数据库的特性,比如事务,HA,主从库. REmote DIctionary S ...

  6. 在腾讯云服务器上安装JDK+Tomcat并启动tomcat

    由于Java web项目需要使用到tomcat所以决定在腾讯云服务器(centos7.X)上安装JDK和tomcat,来部署我们的项目. 准备工具: 云服务器:centos7.x+ 本地连接服务器:X ...

  7. MyBatis学习总结之一对多映射

    1.首先创建2张表:students 和grades create table grades( gid ) primary key, gname varchar() ); create table s ...

  8. JAVA学习大纲

    1.第一节 JAVA概念与JDK的安装 (1)JDK的安装和环境变量的设置: (2)相关基本概念:JDK.SDK.JRE.JVM.J2SE.J2EE.J2ME.java API.JAVA语言特点: ( ...

  9. MAC使用nginx分发80至8080端口

    由于项目必须要启动80端口,但是mac系统中非root用户无法直接使用1024以下的端口 2.释放apache的80端口 由于Mac OS是自带Apache服务的,它本身占用了80端口,首先你需要将A ...

  10. numpy学习总结

    Contents Numpy是一个用python实现的科学计算包,主要提供矩阵运算的功能,而矩阵运算在机器学习领域应用非常广泛,Numpy一般与Scrapy.matplotlib一起使用. Numpy ...