公司中秋節要上線一個線上的活動：放天燈，簡單的動畫，所以花費不了很多時間

先上一下放天燈的動畫代碼，代碼是根據一個下雪花代碼改編的，直接操作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];//獲取cookietvar 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后綴解壓即可。懶得上傳附件，就這樣了

?

轉載于:https://www.cnblogs.com/netqq/p/5857742.html

總結

以上是生活随笔為你收集整理的简单的放天灯动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。