动画插件和视频

Reading time ~3 minutes

插入视频,使用,在js中,当视频页面出现的时候就使用attr()方法控制写出它的视频地址,隐藏这个页面的时候,也是使用attr()方法控制它。

使用动画插件,先写它的js,再使用data-fx值,再看自己动画的需要,有fadeInDown:上,fadeInLeft:左,fadeInUp:下,fadeInRight:右四个属性,在后面写上自己所需要动画的哪个属性,不过不要忘记要引入动画插件的css文件,它的js代码如下:

pageCtrl.on("change", function () {
        var _prve = $('.wrap .page').eq(pageCtrl.prevPage);
        _prve.find('[data-fx]').each(function (i) {
            $(this).removeClass($(this).data("fx")).removeAttr("style");
        });
        if (pageCtrl.curPage == 0)pagechang();
    });

    pageCtrl.on("beforechange", pagechang);
    function pagechang() {
        var _this = $('.wrap .page').eq(pageCtrl.curPage);
        var alldelay = 0;
        _this.find('[data-fx]').each(function (i) {

            var ani = $(this).data("fx");
            var ani_delay = $(this).data("animation-delay") || i > 0 ? .5 : 0;
            var ani_duration = $(this).data("animation-duration") || 1;
            alldelay += Number(ani_delay);
            $(this).addClass(ani).addClass("animated").css({
                "-webkit-animation-delay": alldelay + "s",
                "-moz-animation-delay": alldelay + "s",
                "-ms-animation-delay": alldelay + "s",
                "animation-delay": alldelay + "s",
                "-webkit-animation-duration": ani_duration + "s",
                "-moz-animation-duration": ani_duration + "s",
                "-ms-animation-duration": ani_duration + "s",
                "animation-duration": ani_duration + "s"
            });
        });

    }

只有多做些实例或者多做些项目,在里面可以学到更多的知识,才会遇到自己想不到的问题,不断的锻炼,才会巩固知识,劳劳的记住,技术是靠经验来丰富,熟练的