1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. <style>
  7.  
  8.     * {
  9.         margin:0;
  10.         padding:0;
  11.     }
  12.     html,body {
  13.         height:100%;
  14.     }
  15.  
  16.     div.girl {
  17.         width:79px;
  18.         height:108px;
  19.         background:url(aisidier.png) 0 -216px no-repeat;
  20.         position:absolute;
  21.  
  22.     }
  23.  
  24.     div.end {
  25.         border:2px solid #000;
  26.         position:absolute;
  27.         left:1000px;
  28.         top:0;
  29.         height:100%;
  30.  
  31.     }
  32. </style>
  33. </head>
  34.  
  35. <body>
  36.     <div class="end"></div>
  37.  
  38.     <script>
  39.         var girls = [];
  40.         function Girls(){
  41.             this.x = 0;
  42.             this.y = parseInt(Math.random()*(document.documentElement.clientHeight - 108));
  43.             this.speed = parseInt(Math.random()*10)+1;
  44.             this.step = 0;
  45.             this.isMove = true;
  46.             this.init();
  47.             this.update();
  48.             this.bindEvent();
  49.             girls.push(this);
  50.         }
  51.  
  52.         Girls.prototype.init  = function(){
  53.             this.dom = document.createElement('div');
  54.             this.dom.className = "girl";
  55.             document.body.appendChild(this.dom); //上树
  56.         };
  57.  
  58.         Girls.prototype.update = function(){
  59.  
  60.             if(!this.isMove)
  61.                 return;
  62.              this.x += this.speed;
  63.             if(this.x > 1000){
  64.                 this.goDeid();
  65.             }
  66.             this.step++;
  67.             if(this.step > 7){
  68.                 this.step = 0;
  69.             }
  70.             this.dom.style.left = this.x+"px";
  71.             this.dom.style.top = this.y+"px";
  72.             console.log("left:",this.dom.style.left ,"top:",this.dom.style.top);
  73.             this.dom.style.backgroundPosition = -this.step*79+"px -216px";
  74.         };
  75.  
  76.         Girls.prototype.goDeid = function(){
  77.             document.body.removeChild(this.dom); //下树
  78.             for(var i=0;i<girls.length;i++){
  79.                 if(girls[i] == this){
  80.                     girls.splice(i,1);
  81.                 }
  82.             }
  83.         };
  84.  
  85.         Girls.prototype.bindEvent = function(){
  86.             var _this = this;
  87.             this.dom.onclick = function(){
  88.                 _this.isMove = !_this.isMove;
  89.             };
  90.         };
  91.  
  92.         setInterval(function(){
  93.             for(var i=0;i<girls.length;i++){
  94.                 girls[i].update();
  95.             }
  96.         },100);
  97.  
  98.         new Girls();
  99.         new Girls();
  100.         new Girls();
  101.         new Girls();
  102.         new Girls();
  103.         new Girls();
  104.  
  105.     </script>
  106.  
  107. </body>
  108. </html>
  109.  
  110. 图片在文件中

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. 吴裕雄--天生自然python学习笔记：Python MongoDB

    MongoDB 是目前最流行的 NoSQL 数据库之一,使用的数据类型 BSON(类似 JSON). PyMongo Python 要连接 MongoDB 需要 MongoDB 驱动,这里我们使用 P ...

  2. libphp5.so可能遇到的问题(转摘)

    libphp5.so可能遇到的问题(转摘) 安装完APACHE和PHP5后,经常在启动APACHE载入libphp5.so时发现问题.我把遇到的问题统计下来: 1.undefined symbol:S ...

  3. 很全很全的 JavaScript 模块讲解

    模块通常是指编程语言所提供的代码组织机制,利用此机制可将程序拆解为独立且通用的代码单元.所谓模块化主要是解决代码分割.作用域隔离.模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面. ...

  4. EMP平台简介（转载）

    1.什么是EMP EMP平台是一个基于J2EE体系的.WEB应用的.基础框架平台: 表现逻辑框架(MVCFrameWork)与业务逻辑框架(EMPBizLogic)分离: 组件化.配置化设计技术: 可 ...

  5. Python---13靠谱的Pycharm安装详细教程

    昨天自学廖雪峰老师的python课程时,用的sublime编辑器,在命令行模式进行的输出,输出结果一直报错,说Python版本有问题,但在版本是满足要求的.最后在同事的电脑上运行了一下,是可以正常输出 ...

  6. 机器学习迁移模型到IOS

    https://paulswith.github.io/2018/02/24/%E8%BF%81%E7%A7%BB%E5%AD%A6%E4%B9%A0InceptionV3/ 上文记录了如何从一个别人 ...

  7. 当鼠标hover的时候，使用tip将overflow:hidden隐藏的文字显示完全

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Ueditor富文本编辑器--Ctrl V 粘贴后原有图片显示错误

    最近负责将公司官网从静态网站改版成动态网站,方便公司推广营销人员修改增加文案,避免官网文案维护过于依赖技术人员.在做后台管理系统时用到了富文本编辑器Ueditor,因为公司有一个阿里云文件资源服务器, ...

  9. 基于 HTML5 Canvas 的 3D 热力云图效果

    前言 数据蕴藏价值,但数据的价值需要用 IT 技术去发现.探索,可视化可以帮助人更好的去分析数据,信息的质量很大程度上依赖于其呈现方式.在数据分析上,热力图无疑是一种很好的方式.在很多行业中都有着广泛 ...

  10. Python开发（三）：字符编码，文件操作，函数

    一:三级菜单 If len(choice) == continue # 判断输入的是否为空,为空就跳出这次循环进行下次循环, exit(“bye”) :退出程序显示,bye 二:编码 最早的编码是as ...