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