弘帝模板通用动画hondy.animate.js

admin

直接引用以下JS，无需修改CSS，实现动画，Setting为CSS设置，ING为动画。
$(function () {
    if (!ismobie()) {
        flexsetting(".flexible");
        flexibling(".flexible");
        rollsetting(".roll",5)
        slipsetting(".slip");
        $(window).scroll(function () {
            rolling(".roll");
            sliping(".slip");
        });
    }
    $(".navbar-toggler").click(function () { slidermenu(); });
})

var slidermenu = function () {
    $(".menu").slideToggle("slow");
}

var flexsetting = function (css) {
    var mlr = -300;
    var o = $(css);
    if (o.length > 0) {
        var n = o.find("ul li").length;
        var m = Math.floor(n / 2);
        if (n % 2 == 1) {
            o.find("ul li").eq(m).css("display","none");
            o.find("ul li:lt(" + m + ")").css("margin-left",mlr);
            o.find("ul li:gt(" + m + ")").css("margin-right",mlr);
        } else {
            o.find("ul li:lt(" + m + ")").css("margin-left",mlr);
            o.find("ul li:eq(" + m + ")").css("margin-right",mlr);
            o.find("ul li:gt(" + m + ")").css("margin-right",mlr);
        }
    }
}

var flexibling = function (css) {
    var wt = $(window).scrollTop();
    var o = $(css);
    var st = o.offset().top - $(window).height();
    var n = o.find("ul li").length;
    var m = Math.floor(n / 2);
    if (wt > st) {
        if (n % 2 == 1) {
            o.find("ul li").eq(m).fadeIn("slow");
            o.find("ul li:lt(" + m + ")").animate({ "margin-left": "0" },800);
            o.find("ul li:gt(" + m + ")").animate({ "margin-right": "0" },"slow");
        } else {
            o.find("ul li:lt(" + m + ")").animate({ "margin-left": "0" },"slow");
            o.find("ul li:eq(" + m + ")").animate({ "margin-right": "0" },"slow");
            o.find("ul li:gt(" + m + ")").animate({ "margin-right": "0" },"slow");
        }
    }
}
//设置两边CSS
var rollsetting = function (css,cols) {
    var mlr = -300;
    var o = $(css);
    var col;
    if (o.length > 0) {
        var n = o.find("ul li").length;
        var m = Math.floor(n / cols);//得到行数
        o.find("ul li").css({ "position": "relative","left": mlr });
        for (var i = 0; i <= m; i++) {
            if (i % 2 == 1) {
                for (var j = 0; j < cols; j++) {
                    col = i * cols + j;
                    if (col < n) {
                        o.find("ul li:eq(" + col + ")").css({ "left": -mlr });
                    }
                }
            }
        }
    }
}
//两边向中间移动
var rolling = function (css) {
    var wt = $(window).scrollTop();
    var o = $(css);
    var st = o.offset().top - $(window).height();
    if (wt > st) {
        o.find("ul li").animate({ left: 0 },1000);
    }
}

var slipsetting = function (css) {
    var mlr = -300;
    var o = $(css);
    if (o.length > 0) {
        o.find("ul li").css({ position: "relative",left: -mlr });
        o.find("ul li:first").css({ position: "relative",left: mlr });
    }
}

var sliping = function (css) {
    var wt = $(window).scrollTop();
    var o = $(css);
    var st = o.offset().top - $(window).height();
    var n = o.find("ul li").length;
    if (wt > st) {
        var i = 0;
        var ds = setInterval(function () {
            o.find("ul li").eq(i).fadeIn("slow").animate({ left: 0 },"slow");
            i++;
            if (i == n) {
                clearInterval(ds);
            }
        },300);
    }
}

function ismobie() {
    var userAgentInfo = navigator.userAgent;
    var Agents = new Array("Android","iPhone","SymbianOS","Windows Phone","iPad","iPod");
    var flag = false;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = true;
            break;
        }
    }
    return flag;
}