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. UIView的使用

    UIView是iOS中所有视图的基类,表示屏幕上的一块矩形区域. UIView的基本属性包括: 1.frame,控制视图的显示位置和大小 2.backgroundColor,控制视图的背景颜色 3.a ...

  2. 【freemaker】之获取xml的值

    测试代码 @Test public void test09() throws Exception{ root.put("doc", NodeModel.parse(new Inpu ...

  3. python---str

    Python转义字符 \ (在行尾时) 续行符 \\ 反斜杠符号 \' 单引号 \" 双引号 \a 响铃 \b 退格(Backspace) \e 转义 \000 空 \n 换行 \v 纵向制 ...

  4. Windows 7 安装 .netfx 4 卡住

    net stop wuauserv rename \windows\SoftwareDistribution SoftwareDistribution_old net start wuauserv

  5. Eclipse编辑XML文件的代码提示

    1.Eclipse无法解析的情形 Eclipse中编辑XML文件时,能够代码自动提示,是因为在XML头部引入了DTD文件(文档类型定义),Eclipse就是通过解析这个DTD文件,来达到代码提示的功能 ...

  6. case语句

    case语句是多分支选择语句,if语句只有两个分支可供选择,而实际问题中常常需要用到多分支选择结构.例如,学生成绩分类(90分以上为A,--):人口统计分类(按年龄分为老.中.青.少.幼)等.当然这些 ...

  7. Mysql备份迁移——MySqlBackup(.net)——(无法解决视图嵌视图报错)

    这里是利用MySqlBackup,可以再nuget中下载. 无法解决视图嵌视图报错的问题,只导表跟数据比较合适,如果有视图嵌视图,请参照Mysql备份迁移——Mysqldump(.NET调用Mysql ...

  8. FPGA奇数分频

    在FPGA设计中,分频是很常用的一个基本功能,一般来说,如果需要偶数分频即2次幂的整数倍,这个就很简单了,如2.4.8.16.32.64等这些以2的整数倍的. 这里说的是奇数倍分频,如时钟是100MH ...

  9. web测试一般分为那几个阶段,哪些阶段是可以用工具实现的,都有些什么工具,哪些阶段必须要人工手动来实现呢?

    这是我在知乎上遇到的一个问题: web测试一般分为那几个阶段,哪些阶段是可以用工具实现的,都有些什么工具,哪些阶段必须要人工手动来实现呢? 首先这个提问本身就是有问题的, 没有哪个阶段是用工具实现的, ...

  10. 树莓派make 360wifi2报错

    输入make命令后报错 make: *** /lib/modules/3.10.25+/build: No such file or directory. Stop. 系统缺少编译模块所需要的内核头文 ...