公司中秋节要上线一个线上的活动：放天灯，简单的动画，所以花费不了很多时间
先上一下放天灯的动画代码，代码是根据一个下雪花代码改编的，直接操作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后缀解压即可。懒得上传附件，就这样了