最近写了一个红包雨的小功能,但感觉自己的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 ...
随机推荐
- 网站tomcat配置
<?xml version='1.0' encoding='utf-8'?> <!-- Licensed to the Apache Software Foundation (ASF ...
- 从 Bootstrap 2.x 版本升级到 3.0 版本
摘自http://v3.bootcss.com/migration/ Bootstrap 3 版本并不向后兼容 v2.x 版本.下面的章节是一份从 v2.x 版本升级到 v3.0 版本的通用指南.如需 ...
- 51nod 1471 小S的兴趣 sqrt
小S喜欢有趣的事.但是,每个人的兴趣都是独特的.小S热衷于自问自答.有一天,小S想出了一个问题. 有一个包含n个正整数的数组a和针对这个数组的几个问题.这些问题有两种类型: 1. 在数组下标 ...
- HTC Vive开发笔记之UI Guideline
本文转自HTC官方论坛,原址https://www.htcvive.com/cn/forum/chat.php?mod=viewthread&tid=1641&extra=page=1 ...
- 用于所有Windows驱动程序开发者的概念
用户模式和内核模式 虚拟地址空间 设备节点和设备堆栈 I/O 请求数据包 驱动程序堆栈 微型驱动程序和驱动程序对 Windows 驱动程序工具包中的头文件 为不同版本的 Windows 编写驱动程序
- JavaScript中Math--random()/floor()/round()/ceil()
Math.random():返回0-1之间的任意数,不包括0和1: Math.floor(num):返回小于等于num的整数,相当于四舍五入的四舍,不五入:例子:Math.floor(1.0);Mat ...
- CRM JS 设置lookup字段 setSimpleLookupValue
function setSimpleLookupValue(LookupId, Type, Id, Name) { /// <summary> /// Sets the value for ...
- c#lock语句及在单例模式中应用
C#中的lock语句是怎么回事,有什么作用? C#中的lock语句将lock中的语句块视为临界区,让多线程访问临界区代码时,必须顺序访问.他的作用是在多线程环境下,确保临界区中的对象只被一个线程操作, ...
- 转 C# 给某个方法设定执行超时时间
在某些情况下(例如通过网络访问数据),常常不希望程序卡住而占用太多时间以至于造成界面假死. 在这时.我们可以通过Thread.Thread + Invoke(UI)或者是 delegate.Begin ...
- centos 用dvd创建yum 仓库
环境:CentOS 6.0 默认的yum是以网络来安装的,在没有网络或者网速不佳的情况下,通过yum来安装软件是意见非常痛苦的事情.其实对于CentOS DVD来说,里面提供的软件就足以满足我们的需要 ...