最近写了一个红包雨的小功能,但感觉自己的js还有很多地方可以提高,望大神们可以帮忙指点一二
2016-09-01 14:55
477 查看
js部分
View Code
html部分
'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(); } );
View Code
html部分
<div class="redEnv-contain"> </div> <script> setInterval(RedEnvelope,500); </script>
相关文章推荐
- 最近想写一个邮箱自动验证功能,在网上看了很多,写到自己上面出了很多问题,记录下来给后面的人一个参考
- 最近想写一个邮箱自动验证功能,在网上看了很多,写到自己上面出了很多问题,记录下来给后面的人一个参考
- Python实现日志自动记录功能(一个思路代码,详细可以自己扩展)
- js自己写的一个手机电话同时可以验证的正则表达式
- 自己写的一个计算器,极其简单,并且很多功能不完备
- 下面是一个残缺的程序,不过大体功能是可以看出来的,我实在是改不了了,急啊!!望高手指点!!!
- 最近做了一个小东西,对于接口实现类。发现很多都是一个套路,所以备份下,以后可以经常用到! 这几个是单纯查询的实现类。
- 程序员,不要让自己做兔子(updated) 网上最近流传的一个笑话,关于兔子,狼还有一只老虎的,故事 我就是想打你了,还需要什么理由吗?谁让你是兔子 项目经理是这样当的
- 当一个车进入车道只占另外一个车道的1/4或者比1/4还小的问题解答—— 另请大神们指点一二
- Select 可编辑 - 完美支持各大主流浏览器 最近做项目有个select可编辑的需求,一时棘手,网上找了很多解决方案都不完美,没办法自己写了一个,经测试IE,FF,chrome都支持。特此拿出来
- 周鸿祎,高司令 2010-09-28 00:41 27469人阅读 评论(185) 收藏 举报 还是感到有必要将自己的一些想法快速记下来。 首先是对周鸿祎新员工演讲的看法。 就说实话这一点来说,周鸿祎比很多人强。所以我比较喜欢引用他的话,确实比较实在,不装逼。 至于一个公司招人的风格,是公司自己定的,别人也无权评价。有人说周是画大饼,忽悠员工卖命。废话,难道新员工讲话还有别的目的吗? 但我不认为周的选人思路在别的公司可以通行。原因是这样的:近十几年来,我们听到很多人有类似的说法,比如我们公司不要
- 金万钠说:“上面写的都是我想到的自己觉得比较重要的一些地方,还有很多细节是需要在实践中慢慢摸索和总结的。”
- 自己做了一个C#桌面应用程序消费管理系统,功能感觉有点简陋,求点意见
- 刚刚考了组合数学,感觉还有好多自己并没有复习到,希望今后自己多提高自己的水平呀。
- 页面生命周期里面还有很东西,如PageHandlerFactory等等这些东东也够吃一壶的,发现每走到一个领域,发现要学的东西实在是太多太多啦,总感觉自己所学的东西只是沧海一粟,走过了这道坎,又是一片海洋,我只能呐喊:生命永不止息,学海无涯----够用就好。
- 一个简单的js合并列的例子,大家可以自己改进哦!
- 下面是一个残缺的程序,不过大体功能是可以看出来的,我实在是改不了了,急啊!!望高手指点!!!
- TIPTOP 复制单身数据(自己写的一个公共函数cl_copybody,还有很多问题没实现,希望多交流)
- 今天找了好久好久,找到了一个地方,可以自己的BLOG了,
- 本来从动态壁纸预览页面设置一个动态壁纸回到桌面便可以看到桌面动态壁纸,可以观察得到自己的动态壁纸是否设置成功了(必须知道设置是否成功的结构,因为还有一些操作需要完成)! 但是现在是要在自己的应用中进入