码迷,mamicode.com
首页 > 其他好文 > 详细

简单的放天灯动画

时间:2016-09-09 20:27:46      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:

公司中秋节要上线一个线上的活动:放天灯,简单的动画,所以花费不了很多时间

先上一下放天灯的动画代码,代码是根据一个下雪花代码改编的,直接操作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后缀解压即可。懒得上传附件,就这样了

 

简单的放天灯动画

标签:

原文地址:http://www.cnblogs.com/netqq/p/5857742.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!