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还有很多地方可以提高,望大神们可以帮忙指点一二的更多相关文章

  1. 【原创】最近写的一个比较hack的小爬虫

    目标:爬取爱漫画上面自己喜欢的一个漫画 分析阶段: 0.打开爱漫画主页,迎面就是一坨js代码..直接晕了 1.经过抓包和对html源码的分析,可以发现爱漫画通过另外一个域名发送图片,而当前域名中通过j ...

  2. javascript实现的一个信息提示的小功能/

    //什么状况.CSDN的排版怎么这么多状况,还是本人太次?调整几次都没弄好.最后一遍了-- 最近由于公司业务问题.须要做一些面向公众的平台,于是对UI要求会高一点, 对于传统的alert的这样的方式来 ...

  3. iOS:自己写的一个星级评价的小Demo

    重新整理了下自己星级评价的Demo,可以展示星级评价,可以动态修改星级. github的地址:https://github.com/hunterCold/HYBStarEvaluationView a ...

  4. 用Go写了一个相似Proxy的小程序,能够用来訪问goolge个人使用还是能够的.

    package main import ( "fmt" "io" "net/http" ) func main() { http.Handl ...

  5. 用vuex写了一个购物车H5页面的示例代码

    用vuex写了一个购物车H5页面的示例代码:https://www.jb51.net/article/152008.htm 通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是 ...

  6. 用css动画写一个下红包雨的效果

    红包雨的功能相信大家都做过,不过一般都是用js计算的,闲着无聊用css的样式写了类似的,主要用的是css的transform和animation结合.大概代码逻辑: @keyframes startH ...

  7. 写了一个常规性生成merge 的小脚本

    现在使用数据库来写存储过程,动不动参数就会用到xml ,当然罗,优势也很明显,参数相对固定,而且灵活,如果要修改或者什么的,中间接口层也不需要做变化,只需要修改封装的存储过程以及程序传参就ok了. 随 ...

  8. C# 写的一个生成随机汉语名字的小程序

    最近因为要做数据库相关的测试,频繁使用到测试数据,手动添加太过于麻烦,而且复用性太差,因此干脆花了点时间写了一个生成随机姓名和相关数据的类,贴在这里,有需用的同志们可以参考一下.代码本身质量不好,也不 ...

  9. 用c#写的一个局域网聊天客户端 类似小飞鸽

    用c#写的一个局域网聊天客户端 类似小飞鸽 摘自: http://www.cnblogs.com/yyl8781697/archive/2012/12/07/csharp-socket-udp.htm ...

随机推荐

  1. c++读写二进制文件

    要读取文件必须包含<fstream>头文件,这里包含了C++读写文件的方法,可以使用fstream 类,这个类可以对文件进行读写操作.   1.打开文件.   打开文件可以有两种方式,第一 ...

  2. checkbox 选中、取值处理

    [1].[代码] checkbox 选中.取值处理 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  3. 【python】*与** 参数问题

    可变参数 在Python函数中,还可以定义可变参数.顾名思义,可变参数就是传入的参数个数是可变的,可以是1个.2个到任意个,还可以是0个. 我们以数学题为例子,给定一组数字a,b,c……,请计算a2 ...

  4. Hbase集群搭建及所有配置调优参数整理及API代码运行

    最近为了方便开发,在自己的虚拟机上搭建了三节点的Hadoop集群与Hbase集群,hadoop集群的搭建与zookeeper集群这里就不再详细说明,原来的笔记中记录过.这里将hbase配置参数进行相应 ...

  5. PHP取当前年、月、日开始时间戳和下年、月、日开始时间戳函数

    1.当前年的时间戳 2.当前月的时间戳 3.当前日的时间戳 4.明年的开始时间戳 5.下月的开始时间戳 6.明日的开始时间戳 7.当前时间戳 函数代码: /** * 获取时间戳 * $Ymd = Y ...

  6. hbase shell 基本命令总结

    访问hbase,以及操作hbase,命令不用使用分号hbase shell 进入hbase list 查看表hbase shell -d hbase(main):024:0> scan '.ME ...

  7. NPOI生成单元格(列)下拉框

    客户提出能否将导入模板中,课程一列添加下拉框方便选择,不用手输入,以减少输入错误的可能性.于是在网上找了点代码,稍加整理后,形成了以下方案,代码部分: 一:生成课程列表,并放置在excel的单独she ...

  8. windows 上执行python pywin32.exe

    大家熟知的python脚本可以在linux系统上直接运行,因为linux上会安装python编译器 然而windows不会安装,如果想要别人直接运行你发布的python脚本,一种方法是在他的windo ...

  9. 【整理】更改MSSQL默认字符集

    记录所有应用到 SQL Server 实例和当前排序规则的 Service Pack 和修补程序: SELECT SERVERPROPERTY('ProductVersion ') AS Produc ...

  10. brackets快捷键使用

    ctrl+b 当选中一个文本时,会出现相同的文本,被高亮显示 按ctrl+b 相同的文本就全部获得了焦点 这样就可以同时更改这些相同的文本ctrl+e    打开或关闭快速编辑alt+u 注释ctrl ...