最近写了一个红包雨的小功能,但感觉自己的js还有很多地方可以提高,望大神们可以帮忙指点一二
js部分
'use strict';
function RedEnvelope(options){
if(this === window){
return new RedEnvelope(options);
}
var defaults = {
imgWidth:60,//红包的宽度
position:'absolute',
imgEnvSrc:'../images/game/redEnv/redEnv.png',
containerClass:'.redEnv-contain'
};
if(!options){
options = defaults;
}else{
for (var option in defaults) {
if (typeof options[option] === undefined) {
options[option] = defaults[option];
}
}
}
this.options = options;
this.createEnv();
}
RedEnvelope.prototype.createEnv = function(){
var imgEnv = document.createElement('img');
imgEnv.src = this.options.imgEnvSrc;
imgEnv.style.width = this.options.imgWidth+'px';
this.evnPosition(imgEnv);
}
RedEnvelope.prototype.evnPosition = function(img){
var containerWidth = $(this.options.containerClass).width();
var containerHeight = window.screen.height;
$(this.options.containerClass).prepend(img);
//红包初始的位置
img.style.position = this.options.position;
var startTop = parseInt(Math.random()*10+(-10))
var startLeft = parseInt(Math.random()*containerWidth);
//移动的位置
var moveLeft = parseInt(Math.random()*containerWidth+(-30));
var t=parseInt(Math.random() * 1000+1200);
this.evnAnimation({'startLeft':startLeft, 'startTop':startTop, 'moveLeft':moveLeft,'moveTop':containerHeight},t);
}
/*添加元素到主内容上*/
RedEnvelope.prototype.evnAnimation = function (posObject,time){
$(this.options.containerClass).children('img:first').css({'left':posObject.startLeft,'top':posObject.startTop});
$(this.options.containerClass).children('img:first').animate(
{
'left':posObject.startLeft-posObject.moveLeft,
'top':posObject.moveTop
},
time,
'linear',
function(){
$(this).remove();
}
);
html部分
<div class="redEnv-contain">
</div> <script>
setInterval(RedEnvelope,500);
</script>
最近写了一个红包雨的小功能,但感觉自己的js还有很多地方可以提高,望大神们可以帮忙指点一二的更多相关文章
- 【原创】最近写的一个比较hack的小爬虫
目标:爬取爱漫画上面自己喜欢的一个漫画 分析阶段: 0.打开爱漫画主页,迎面就是一坨js代码..直接晕了 1.经过抓包和对html源码的分析,可以发现爱漫画通过另外一个域名发送图片,而当前域名中通过j ...
- javascript实现的一个信息提示的小功能/
//什么状况.CSDN的排版怎么这么多状况,还是本人太次?调整几次都没弄好.最后一遍了-- 最近由于公司业务问题.须要做一些面向公众的平台,于是对UI要求会高一点, 对于传统的alert的这样的方式来 ...
- iOS:自己写的一个星级评价的小Demo
重新整理了下自己星级评价的Demo,可以展示星级评价,可以动态修改星级. github的地址:https://github.com/hunterCold/HYBStarEvaluationView a ...
- 用Go写了一个相似Proxy的小程序,能够用来訪问goolge个人使用还是能够的.
package main import ( "fmt" "io" "net/http" ) func main() { http.Handl ...
- 用vuex写了一个购物车H5页面的示例代码
用vuex写了一个购物车H5页面的示例代码:https://www.jb51.net/article/152008.htm 通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是 ...
- 用css动画写一个下红包雨的效果
红包雨的功能相信大家都做过,不过一般都是用js计算的,闲着无聊用css的样式写了类似的,主要用的是css的transform和animation结合.大概代码逻辑: @keyframes startH ...
- 写了一个常规性生成merge 的小脚本
现在使用数据库来写存储过程,动不动参数就会用到xml ,当然罗,优势也很明显,参数相对固定,而且灵活,如果要修改或者什么的,中间接口层也不需要做变化,只需要修改封装的存储过程以及程序传参就ok了. 随 ...
- C# 写的一个生成随机汉语名字的小程序
最近因为要做数据库相关的测试,频繁使用到测试数据,手动添加太过于麻烦,而且复用性太差,因此干脆花了点时间写了一个生成随机姓名和相关数据的类,贴在这里,有需用的同志们可以参考一下.代码本身质量不好,也不 ...
- 用c#写的一个局域网聊天客户端 类似小飞鸽
用c#写的一个局域网聊天客户端 类似小飞鸽 摘自: http://www.cnblogs.com/yyl8781697/archive/2012/12/07/csharp-socket-udp.htm ...
随机推荐
- 第三节:视图(Views)和模板(Templates)
目录 概览 编写视图 编辑视图实际做一些事情 抛出404异常 使用模板系统 移除在代码中的硬编码网址 Url名称的命名空间 概览 视图是Django应用的网页的“类型”,一般服务于特定的功能并且有特定 ...
- 实用SQL
下列语句部分是MsSql语句,不可以在access中使用.SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,U ...
- ADF_Controller系列4_通过创建ADF Menu作为页面向导(Part2)
2015-02-15 Created By BaoXinjian
- (Array)27. Remove Element
Given an array and a value, remove all instances of that value in place and return the new length. D ...
- 关于MOD
同余式:正整数a,b对p取模,它们的余数相同,(a % p)=(b % p) 记做 或者a ≡ b (mod p). 运算规则 模运算与基本四则运算有些相似,但是除法例外.其规则如下: ...
- 【转】CwRsync简介
rsync是linux下一款用于同步文件的优秀软件,window下也可以使用它,不过名字为cwRsync.cwRsync也分为客户端和服务端,官方网址:https://www.itefix.no/i2 ...
- linux下一对多socket服务器端多线程泄露问题
线程创建多了,没有释放.导致内存泄露... int main() { int len; int on=1; // pMachList = CreateEmptyLinklist(); DataBase ...
- 【C-001】printf理解
输出整型的数值就不说了, 显示浮点型: printf("%.2f",3.33); //保留两位小数显示,数字前面没有空格填充 显示的时候,设计到0-1之间的数的时候: printf ...
- 常见面试问题 - Useful Links
1. Data Structure & Algorithm - 二叉树 http://baike.baidu.com/link?url=jKNdOOipbp-gloTVmSU4PT2mVB94 ...
- 在本地主机上powershell中连接远程主机执行vbs脚本,得到执行结果(2008版及以上)
在桌面版的主机上远程管理服务器版主机,在本地powershell中连接远程主机执行vbs脚本,得到执行结果. 执行步骤: 1.将本地主机上的Hyper.vbs复制到远程连接主机上.例如,本地vbs脚本 ...