最近写了一个红包雨的小功能,但感觉自己的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 ...
随机推荐
- Excel中如何提取字符串中的数字
取字符串中的数字,假如数据在A列,提取公式为 =LOOKUP(9^9,--MID(A1,MIN(FIND({1,2,3,4,5,6,7,8,9,0},A1&5^19)),ROW($1:$99) ...
- Nginx日志常用分析命令汇总 (转)
三.常用日志分析命令 1.总请求数 1 wc -l access.log |awk '{print $1}' 2.独立IP数 1 awk '{print $1}' access.log|sort |u ...
- [Spring] IOC - Annotation
Spring Annotation使用例子. 与XML配置的例子一样:http://www.cnblogs.com/HD/p/3962541.html Project结构: 配置文件:springCo ...
- 7、java实现的两种单例模式
/* 两种单例模式的演示 */ //饿汉式 class Signal { private Signal(){} private Signal s = new Signal(); public stat ...
- Discuz有关问题解决办法汇总
1.Can not write to cache files, please check directory ./data/ and ./data/cache/ . 无法写入缓存 解决办法:在sour ...
- 每天一个 Linux 命令(13):less 命令
less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性. 在 more 的时候,我们并没有办法向前面 ...
- QT学习之路--深入了解信号槽
槽函数可以和一个信号相连接,当这个信号发生时,它可以被自动调用.connect()语句的原型类似于:connect(sender, SIGNAL(signal), receiver, SLOT(slo ...
- ArcGIS Engine要素渲染和专题图制作(转)
摘要:Feature的常用的绘制方法包括:1.简单绘制:2.唯一值绘制/多字段唯一值绘制:3.点密度/多字段点密度绘制:4.数据分级绘制:5.质量图(饼图/直方图): 6.按比例尺渲染:7.比例符号渲 ...
- mysql存储emoji表情
微信获取的用户昵称nickname中带有emoji表情,转换成字符码后是这种形式“\xF0\x9F\x91\x8D\xE6\x94...”, 直接保存可能出现以下错误 Caused by: java. ...
- linker command failed with exit code 1 (use -vto see invocation)
报这样的错误可能是同一个.m文件同时存在,要先把你新添加的.m文件彻底删除 Move to Trash 点击这个删除.然后clear一下,再在重新添加你所需要的文件即可解决.这次添加不要推进来,需要在 ...