<!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. 深入JVM内核--JVM运行机制

    JVM启动流程 JVM基本结构 PC寄存器 每个线程拥有一个PC寄存器 在线程创建时 创建 指向下一条指令的地址 执行本地方法时,PC的值为undefined 方法区 保存装载的类信息 类型的常量池 ...

  2. mysql索引的面试题

    相信很多人对于MySQL的索引都不陌生,索引(Index)是帮助MySQL高效获取数据的数据结构. 因为索引是MySQL中比较重点的知识,相信很多人都有一定的了解,尤其是在面试中出现的频率特别高.楼主 ...

  3. byte的取值范围是-128~127,那么包含-128和127吗？

    本帖最后由 王德升老师 于 2019-12-27 17:56 编辑 byte的取值范围为什么是-128~127?如果面试官问你取值范围包含127吗?1. 首先我们知道Java中byte类型是1个字节占 ...

  4. Python-多任务复制文件夹

    import multiprocessing import os import time def copy_file(queue, file_name, old_folder_name, new_fo ...

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

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

  6. JFreeChart插件使用

    以java project为例,首先需要导入需要的jar包:jcommon-1.0.23.jar, jfreechart-1.0.19.jar. 画饼状图示例: package com.it.jfch ...

  7. eclipse、myeclipse使用常用的小技巧

    1.修改类名称上的@author  *** Preference----Java----Code Style----Code Templates----->Comments----->Ty ...

  8. SWUST OJ 爬不出去的水井(0333)

    爬不出去的水井(0333) Time limit(ms): 1000 Memory limit(kb): 65535 Submission: 1069 Accepted: 150 Descriptio ...

  9. 18岁，赚到了人生中的第一个10W！

    大家好,我是九歌 今年我18岁,赚到了我人生中的第一个10W 截至2019年10月14日,我已经做了43天的公众号啦,粉丝也悄然增长到了1W8,感谢各位读者朋友给我的支持和鼓励. 相信大部分读者都是从 ...

  10. 从社交到IP 庞大手游玩家大军迈向社群化之路

    庞大手游玩家大军迈向社群化之路" title="从社交到IP 庞大手游玩家大军迈向社群化之路"> 移动互联网及相关智能设备的快速迭进,不仅改变了我们的生活方式,也彻 ...