function Animation(list) {
this.box = document.getElementById(list.id);
this.size = list.size;
this.url = list.url; this.init() // Animation.prototype中的init(),初始化一些值(非私有)
this.DOMready(); // 调用Animation.prototype中的 DOMready(),每一个new Animation()都会执行这里面的语句
} Animation.prototype = {
// 1.init:初始化一些非私有值
init:function(){
this.width = box.clientWidth;
this.height = box.clientHeight;
}, // 2.DOMready:用来生成div的,用到定时器,循环设置
DOMready: function(){
var box = this.box;
var size = this.size;
// 下面保存了this(Animation)到self之中,因为等会要调用Animation.DOMmove(cirDiv)
var self = this; var timer = setInterval(function(){
var top = ;
var xPosition = Math.random()*(self.width - self.size);
var cirDiv = document.createElement("div");
cirDiv.style.cssText = "background:"+LYX_Colors_getRandomColor()+";"+"left:"+xPosition+"px;"+ "width:25px;height:25px;border-radius: 50%;position: absolute;";
box.appendChild(cirDiv); // 调用Animation.DOMmove(cirDiv),给每个div设置定时器,用来调整top值
self.DOMmove(cirDiv)
}, )
}, // 3.调整top值函数
DOMmove: function(cirDiv) {
var top = ;
var self = this;
var cirDiv = cirDiv;
var timer_2 = setInterval(function() {
top++;
cirDiv.style.top = top+"px";
if (top > self.height - self.size) {
box.removeChild(cirDiv);
clearInterval(timer_2);
}
},)
}
} // 新建s调用方法
var s = new Animation({
id: "box",
size: ""
});

JS中的混合模式的更多相关文章

  1. JS中有关对象的继承以及实例化、浅拷贝深拷贝的奥秘

    一.属性的归属问题 JS对象中定义的属性和方法如果不是挂在原型链上的方法和属性(直接通过如类似x的方式进行定义)都只是在该对象上,对原型链上的没有影响.对于所有实例共用的方法可直接定义在原型链上这样实 ...

  2. 5.0 JS中引用类型介绍

    其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...

  3. 【repost】JS中的异常处理方法分享

    我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...

  4. JS中给正则表达式加变量

    前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下.   一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...

  5. js中几种实用的跨域方法原理详解(转)

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  6. 关于js中的this

    关于js中的this this是javascript中一个很特别的关键字,也是一种很复杂的机制,学习this的第一步就是要明白this既不指向函数自身也不指向函数的词法作用域,this实际上是函数被调 ...

  7. 表值函数与JS中split()的联系

    在公司用云平台做开发就是麻烦 ,做了很多功能或者有些收获,都没办法写博客,结果回家了自己要把大脑里面记住的写出来. split()这个函数我们并不陌生,但是当前台有许多字段然后随意勾选后的这些参数传递 ...

  8. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  9. 在node.js中,使用基于ORM架构的Sequelize,操作mysql数据库之增删改查

    Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...

随机推荐

  1. oracle调试存储过程

    跟着楼主一起来测试存储过程吧: 1.右键要测试的存储过程 出现如下提示框 2.填写参数 3.点击开始,如下操作 over,就是这么简单 -------------------------------- ...

  2. web工程spring+ibatis单元测试

    web工程spring+ibatis在本地做单元测试,用例如下: package wanghongye; import org.junit.Before; import org.junit.Test; ...

  3. 【SAP BusinessObjects】WEBI中的动态求和,累加函数的使用

    在WEBI中,提供了这样一个函数: RunningSum([字段名]) 其作用是,将[字段名]这一列进行累加动态求和 对于需要进行计算累加值的列就不必写复杂的SQL,直接使用此函数即可解决.

  4. jq prepend() 方法在被选元素的开头(仍位于内部)插入指定内容。 提示:prepend() 和 prependTo() 方法作用相同。差异在于语法:内容和选择器的位置,以及 prependTo() 无法使用函数来插入内容。

    <html><head><script type="text/javascript" src="/jquery/jquery.js" ...

  5. Nginx+Lua 积累

    1.解析16进制编码的中文参数 local encodeStr = "%E6%B0%94" local decodeStr = ""; , #encodeStr ...

  6. ACM Registration system

    Registration system 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 A new e-mail service "Berlandesk&q ...

  7. Linux3.4内核 Yaffs2文件系统的移植

    作者:李老师,华清远见嵌入式学院讲师. [实验目的] Yaffs2文件系统是嵌入式系统中常用到的一种文件系统,是也是移植Android所必须的.通过向FS_S5PC100平台移植Yaffs文件系统,了 ...

  8. The Beatles-Hey Jude

    轉載自 https://www.youtube.com/watch?v=V3jCYm_QGZQ Hey Jude, don't make it bad.Take a sad song and make ...

  9. jquery dialog open后,服务器端控件失效的快速解决方法

    jquery dialog为我们提供了非常漂亮实用的对话框,比单调的alert.confirm.prompt好用很多. 在使用jquery与.net共同开发时,直接调用jquery dialog的op ...

  10. mapreduce作业状态一直是ACCEPTED

    搭建yarn环境后,执行 hadoop/bin/hadoop jar hadoop/share/hadoop/mapreduce/hadoop-mapreduce-examples-2.4.1.jar ...