首页 > 代码库 > 简单的放天灯动画
简单的放天灯动画
公司中秋节要上线一个线上的活动：放天灯，简单的动画，所以花费不了很多时间
先上一下放天灯的动画代码，代码是根据一个下雪花代码改编的，直接操作dom当然效率不会很高，不过正好使用我们的业务
var windowHeight = $(window).height();; var starAreaBottomHeight = parseInt(windowHeight / 2); //灯笼出现的基本位置 var zindex = 0; //最高层数 var docWidth = $(window).width(); //文档宽度 $(function () { $(".starbg,.allbody").height($(window).height()); var d = "<div class=‘star‘><div>"; function Tideng() { var x = Math.random() * docWidth; //出现位置偏移量，随机 var y = starAreaBottomHeight + (starAreaBottomHeight / 5) - Math.random() * starAreaBottomHeight; //出现位置y方向坐标 var o = 1 - y / windowHeight; //透明度，随机(位置越靠下透明度越高) var fon = 80 - y / windowHeight * 100; //大小，随机(位置月靠下-y越大 越小) var l = x + 20 * Math.random(); //终止位置偏移量， var z = 1000 - (y / windowHeight * 100); //层 var filter = (5 * (y / windowHeight) - 1) * (5 * (y / windowHeight) - 1); var k = 10000 + 5000 * Math.random(); //速度，随机 var tw = 40 + Math.random() * 50; $(d).clone().appendTo(".starbg").css({ left: x + "px", top: y + "px", "-webkit-filter": "blur(" + filter + "px)", //模糊效果 // opacity: o, width: fon, height: fon, zindex: z }).animate({ top: (-fon), left: l + "px", //opacity: 0.1, }, k, "linear", function () { $(this).remove() }) } Tideng(); setInterval(function () { Tideng(); }, 2000); })
根据天灯出现位置计算天灯的大小和模糊度来实现一些立体效果，可惜公司美工给的背景图不是很好。
放一个我自己坐的demo效果
图中的效果与给出的代码有些区别，并且没有为天灯做模糊效果，仅供参考
在开发的过程中遇到了几个问题不太好解决，这里写出做为备注
问题1：
文本框在安卓手机上不能被键盘顶上去或者隐藏，经过调试观察室因为外层div（@A）的position设置的问题和高度的问题。
现象1：整个div A 下半部分不见了（向上滑动页面时候可以看到）。 解决方案：因为A未设置高度，并且是overflow:hidden ，所以键盘顶上去时候，A的下部分被隐藏掉了，设置A的绝对高度解决。
现象2：文本框被键盘遮挡到了，不会再获取焦点的时候被顶到键盘顶部。解决方案：设置A的Position为绝对定位absolute即可，其他几种定位方式未测试，但是不能是fixed ,正是因为这种定位方式，导致它无法被顶上去
问题2：
页面中有背景音乐，有多个页面，但是想在A页面跳转到B页面时候能够继续A页面的播放
解决方案
Audio有一个currentTime特性，可以获取或设置当前播放的位置。配合 Audio的oncanplay事件可以设置其播放起始位置
var audio = $("audio")[0]; //获取cookiet var tiv = $.cookie("tiv"); if (tiv > 0) { try { audio.oncanplay = function () { audio.currentTime = tiv; }; } catch (err) { } }
在A页面记录当前播放位置，在B页面获取即可，我用cookie做存储。当然这种方法在长音频中是有重大bug的。
问题3：
jquery自带动画，是比较坑的本来要执行两个动画动作，但是对 animate 的了解不够，无法实现，于是自己写了一个按中心点缩放div的动画，然后移动div到顶部的实现
trg.animate({ "width": w + "px", "top": top + "px", left: left + "px" }, 1000, function () { setTimeout(function () { var topH = trg.offset().top; //当前图片距离父元素顶部的高度 var parentOffTop = trg.parent().offset().top; //父元素距离顶部的高度 var trgH = trg.height(); var tou = setInterval(function () { topH -= 1; //调整右侧的值（增大）可以增加上升速度[强烈] trg.get(0).style.top = topH + "px"; if (topH < -(trgH + parentOffTop)) { clearInterval(tou); //删除节点 var clrT = setInterval(function () { //200ms检测一次是否飞出视窗，飞出后则删除当前结点并显示按钮 if (trg.offset().top < -(trgH + parentOffTop)) { $(‘.btns_wrap‘).show(); $(".tc_wishes_write").remove(); clearInterval(clrT); } }, 200); } }, 15); //调整这里的值（减少），可以增加上升速度[弱] }, 400); });
由于是公司的项目，因此不能够上源码，但是放天灯部分，我自己做了demo是可以供下载查看的
=》这里不是图片丢失了，是因为他就不是一个正经图片，将图片右键另存为修改为rar后缀解压即可。懒得上传附件，就这样了
简单的放天灯动画