<!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. JsonPath入门教程

    有时候需要从json里面提取相关数据,必须得用到如何提取信息的知识,下面来写一下 语法格式 JsonPath 描述 $ 根节点 @ 当前节点 .or[] 子节点 .. 选择所有符合条件的节点 * 所有 ...

  2. deeplearning.ai 序列模型 Week 2 NLP & Word Embeddings

    1. Word representation One-hot representation的缺点:把每个单词独立对待,导致对相关词的泛化能力不强.比如训练出“I want a glass of ora ...

  3. 防止跨站攻击——CSRFToken

    怎么防止跨站攻击: 表单:在 Form 表单中添加一个隐藏的的字段,值是 csrf_token. 非表单:在ajax获取数据时,添加headers:{ 'X-CSRFToken':getCookie( ...

  4. Nunit说明及简单DEMO

    using System; using System.Collections.Generic; using System.Text; using NUnit.Framework; //安装好NUnit ...

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

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

  6. yii2.0 集合七牛SDK 上传图片到第三方

    首先,请用composer下载七牛phpSDK (具体参考官方文档) composer require qiniu/php-sdk 注册七牛账号 获取 AK SK(密匙) ,创建资源对象 获取doma ...

  7. 海洋深处的数据中心——微软Natick项目

    数据中心(data center)是云计算的支柱,云计算的蓬勃发展离不开数据中心在建造运营方面的不断创新.但云端数据中心的运行过程中会产生大量热量,冷却降温过程则意味着巨大的能源消耗,这意味着需要庞大 ...

  8. Simpo

    Time: 2017-01-16 - Download Github: https://github.com/KeliCheng/Simpo一款快速发布文字和图片到社交网站的macOS菜单栏App,目 ...

  9. uploadifive如何动态传参

    直接上代码 关键:$('#file_upload').data('uploadifive').settings.formData = { 'ID': 'ceshi'}; //动态更改formData的 ...

  10. Azure Devops测试管理（上）

    因为最近测试人员合并到我这边开发组,对于如何能更好管理测试流程和测试与开发能更高效的完成任务,通俗的说如何能更敏捷,深入思考,然后就开始琢磨起TFS(也称之为VSTS/Azure Devops,因为我 ...