最近写了一个红包雨的小功能,但感觉自己的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 ...
随机推荐
- Redis入门(一)系统安装
硬件环境:Thinkpad T450,Intel i5-5200U CPU @ 2.20GHz × 4 ,8GB RAM 软件环境: ubuntu 14.04.4 (trusty) 一.软件安装 #w ...
- UIProgressView和UISlider
UIProgressView和UISlider两个控件长的很像,区别在于UISlider有一个可以改变进度的滑块.虽然样子差不多,提供的属性的功能也差不多,但是属性的名字差别比较大. UIProgre ...
- NSMutableAttributedString 富文本删除线的用法
#import <UIKit/UIKit.h> //价格 NSString *priceStr = @"99元 剁手价66元"; NSMutableAttributed ...
- Android学习笔记(五)
Intent不仅用来启动一个活动,Intent还可以在启动活动的时候传递参数. 1.向下一个活动传递数据 启动活动的时候传递数据,Intent提供了一系列putExtra()方法的重载,可以把要传递的 ...
- DOM节点访问
简而言之,DOM(即文档对象模型)是一种将XML或HTML文档解析成树形节点的方法.通过DOM的方法与属性,我们就可以访问到页面中的任何元素,并进行元素的修改.删除以及添加的操作.同时,DOM也是一套 ...
- How to configure Veritas NetBackup (tm) to write Unified and Legacy log files to a different directory
Problem DOCUMENTATION: How to configure Veritas NetBackup (tm) to write Unified and Legacy log files ...
- 使用php添加定时任务
1. php执行外部命令的函数: system(),exec(),passthru() 注意点: 1.调用的路径,相对路径有时候不是很靠谱. sys ...
- 关于n!mod p
2016.1.26 让我们来研究一下关于n!在mod p下的性质,当然这里p是质数. 首先n!=a*pe,其中p不可整除a.我们现在来做两件事情,求e和a mod p. 显然,n/p表示[1,n]中p ...
- React 附件动画API ReactCSSTransitionGroup
React为动画提供了一个附加组件ReactTransitionGroup,这个附加组件是动画的底层API,并且还提供了一个附件组件ReactCSSTransitionGroup,ReactCSSTr ...
- tcp协议-http协议-time-wait-close-wait必知
前言: tcp四次挥手过程中,谁主动断开,谁有time_wait,被动断开一方会有close_wait time_wait:保持端口占用2mls~4min,避免对方还有一些tcp片发往这个端口,新 ...