jq 个人的特效库

功能介绍

// 这个文件是在2016年9月5日创建的, 博主个人在项目里使用的特效库, 基于jquery, 需引入

函数实现

//当鼠标移动到列表项或点击列表项时，使该列表项变为选中状态。
//移入or点击默认选中
/**
 * 根据用户的操作（点击或移入），对列表项进行选中操作。
 * @param {string} zf_mljf_ul_li - 列表项的选择器。
 * @param {string} mouseover - 触发事件的名称（例如：'click'或'mouseover'）。
 * mrxz('#sampleList li', 'click');
 */
function mrxz(zf_mljf_ul_li, mouseover) {
    // 使用jQuery获取列表项
    var mljf_uli = $(zf_mljf_ul_li);

    // 默认选中第一个列表项
    mljf_uli.first().addClass('active');

    // 为每个列表项绑定事件
    mljf_uli.on(mouseover, function() {
        // 首先移除所有列表项的选中状态
        mljf_uli.removeClass('active');

        // 对当前操作的列表项进行选中
        $(this).addClass('active');
    });
}

// 浏览器导航dh(Nav)
// 这个函数主要是用于实现浏览器的导航条效果，当滚动页面到一定位置时，导航条的位置和样式会发生变化。
// Nav 参数代表导航元素的选择器。
// dh('#myNav'); 菜单的父元素
function dh(Nav) {
    // 获取导航元素
    var zfNav = $(Nav);

    // 获取导航元素的初始位置（距离页面顶部的距离）
    var par = parseInt(zfNav.offset().top);

    // 监听窗口滚动事件
    $(window).scroll(function() {
        // 当页面滚动距离大于导航元素的初始位置时
        if($(window).scrollTop() > par) {
            // 设置导航元素为固定定位，置于页面顶部，并提高z-index使其在其他元素之上
            zfNav.css({
                'position': 'fixed',
                'top': '0',
                'zIndex': '1000'
            });
            // 为导航项添加'active'类
            $('.navLi').addClass('active');
        } else {
            // 当页面滚动距离小于或等于导航元素的初始位置时，将导航元素设置为绝对定位，放在页面底部
            zfNav.css({
                'position': 'absolute',
                'top': 'auto',
                'bottom': '0',
                'zIndex': '1000'
            });
            // 移除导航项的'active'类
            $('.navLi').removeClass('active');
        }
    });
}

// 函数pclb用于实现一个通用的轮播图功能
// 轮播pclb('.warp','.ul','.box','.prev','.next','.defo',1000);
function pclb(warp, ul, box, prev, next, jiaodian, number) {
    // 获取轮播图的各个元素
    var warp = $(warp);
    var ul = $(ul);
    var box = $(box);
    var prev = $(prev);
    var next = $(next);
    var foucs = $(jiaodian);

    // 初始化变量
    var lbTimer;
    var num = 0;
    var num2 = 0;
    var liFirst = ul.children().first().outerWidth(); // 第一个轮播项的宽度

    // 设置元素的基本样式
    warp.css('position', 'relative');
    prev.css({
        'position': 'absolute',
        'zIndex': '10'
    });
    next.css({
        'position': 'absolute',
        'zIndex': '10'
    });
    foucs.css({
        'position': 'absolute',
        'zIndex': '10'
    });

    // 复制第一个轮播项到最后，实现无缝滚动
    ul.children().first().clone().appendTo(ul);
    var liLeng = ul.children().length; // 轮播项的数量

    box.css({
        'width': liFirst,
        'margin': '0 auto',
        'overflow': 'hidden'
    });
    ul.width(liLeng * liFirst);

    foucs.css({
        'width': '100%',
        'textAlign': 'center'
    });

    // 创建焦点指示器
    for (var i = 0; i < liLeng - 1; i++) {
        foucs.append($(""));
    }
    var foucsChild = foucs.children();
    foucsChild.css('cursor', 'pointer');
    foucsChild.eq(0).addClass('active');

    // 设置轮播图的自动播放和鼠标悬停事件
    warp.hover(function () {
        clearInterval(lbTimer);
    }, function () {
        lbTimer = setInterval(function () {
            you();
            lb();
        }, number);
    });
    lbTimer = setInterval(function () {
        you();
        lb();
    }, number);

    // 设置上一张、下一张按钮的点击事件
    prev.click(function () {
        num--;
        num2 = num;
        if (num < 0) {
            num = liLeng - 2;
            ul.css('marginLeft', -liFirst * (liLeng - 1));
        }
        if (num2 > liLeng - 2) {
            num2 = 0;
        }
        lb();
    });
    next.click(function () {
        you();
        lb();
    });

    // 焦点指示器点击事件
    foucsChild.click(function () {
        foucsChild.removeClass('active');
        $(this).addClass('active');
        num = $(this).index();
        num2 = num;
        lb();
    });

    // 轮播图移动到下一个项目的函数
    function you() {
        num++;
        num2++;
        if (num > liLeng - 1) {
            num = 1;
            ul.css('marginLeft', '0');
        }
        if (num2 > liLeng - 2) {
            num2 = 0;
        }
    }

    // 执行轮播动画的函数
    function lb() {
        ul.stop().animate({
            'marginLeft': -num * liFirst
        }, 500);
        foucsChild.removeClass('active');
        foucsChild.eq(num2).addClass('active');
    }
}

// 该函数实现的功能是：在鼠标移入或点击某元素时，对应切换显示另一元素的内容。
// 输入参数有：
// zf_mljf_ul_li: 需要触发事件的元素选择器。
// zf_mljf_ol_li: 需要被切换显示的元素选择器。
// mouseover: 定义触发事件的类型（如"mouseover"或"click"）
// yrqh('.zf_mljf_ul li','.zf_mljf_ol li',mouseover)
function yrqh(zf_mljf_ul_li, zf_mljf_ol_li, mouseover) {
    // 使用jQuery选择需要触发事件的元素和需要切换显示的元素。
    var mljf_uli = $(zf_mljf_ul_li);
    var mljf_oli = $(zf_mljf_ol_li);

    // 默认设置第一个元素为激活状态，并显示其对应的内容。
    mljf_uli.first().addClass('active');
    mljf_oli.first().css('display', 'block');

    // 绑定触发事件。
    mljf_uli.on(mouseover, function() {
        // 移除所有元素的激活状态，并隐藏其对应的内容。
        mljf_uli.removeClass('active');
        mljf_oli.css('display', 'none');

        // 为当前触发事件的元素添加激活状态，并显示其对应的内容。
        $(this).addClass('active');
        mljf_oli.eq($(this).index()).css('display', 'block');
    });
}

// 这是一个用于实现无缝滚动的 JavaScript 函数
// 接受三个参数：滚动容器选择器、滚动速度、滚动间隔时间
// wfgd('.ul', 4, 20);
function wfgd(ul, wflSpeed, wflInterval) {
    // 获取滚动容器元素
    var wflbUl = $(ul);
    // 设置滚动速度
    var wflbSpeed = wflSpeed;
    // 定时器变量，用于控制滚动
    var wflbTimer;

    // 复制滚动内容以实现无缝滚动
    wflbUl.html(wflbUl.html() + wflbUl.html());
    // 设置容器宽度，确保能容纳所有内容
    wflbUl.width(wflbUl.children().length * (wflbUl.children().first().outerWidth(true)));

    // 定义滚动函数
    function wflbXX() {
        // 获取当前的 marginLeft 值
        var marLeft = parseInt(wflbUl.css('marginLeft'));
        // 设置新的 marginLeft 值，实现滚动效果
        wflbUl.css('marginLeft', marLeft + wflbSpeed);

        // 如果滚动超出容器宽度的一半，将 marginLeft 重置为 0，实现无缝滚动
        if (marLeft < -wflbUl.width() / 2) {
            wflbUl.css('marginLeft', '0');
        }
        // 如果滚动到了起始位置，将 marginLeft 重置为容器宽度的一半
        else if (marLeft > 0) {
            wflbUl.css('marginLeft', -wflbUl.width() / 2);
        }
    }

    // 鼠标悬停时清除滚动定时器，停止滚动
    wflbUl.hover(
        function () {
            clearInterval(wflbTimer);
        },
        function () {
            // 鼠标移开时重新启动滚动定时器
            wflbTimer = setInterval(wflbXX, wflInterval);
        }
    );
}

// 有左右无缝滚动函数，接受参数（包裹容器选择器，滚动容器选择器，前一按钮选择器，后一按钮选择器，滚动速度）
// Ywfgd('.warp', '.ul', '.wflbPrev', '.wflbNext', 4);
function Ywfgd(warp, ul, wflbPrev, wflbNext, wflSpeed) {
    // 获取包裹容器元素
    var wflbWarp = $(warp);
    // 获取滚动容器元素
    var wflbUl = $(ul);
    // 获取前一按钮元素
    var wflbPrev = $(wflbPrev);
    // 获取后一按钮元素
    var wflbNext = $(wflbNext);
    // 设置滚动速度
    var wflbSpeed = wflSpeed;
    // 定时器变量，用于控制滚动
    var wflbTimer;

    // 复制滚动内容以实现无缝滚动
    wflbUl.html(wflbUl.html() + wflbUl.html());
    // 设置容器宽度，确保能容纳所有内容
    wflbUl.width(wflbUl.children().length * (wflbUl.children().first().outerWidth(true)));

    // 设置包裹容器的相对定位，用于控制绝对定位的前一和后一按钮
    wflbWarp.css('position', 'relative');
    // 设置前一按钮的绝对定位
    wflbPrev.css({'position': 'absolute'});
    // 设置后一按钮的绝对定位
    wflbNext.css({'position': 'absolute'});

    // 定义滚动函数
    function wflbXX() {
        // 获取当前的 marginLeft 值
        var marLeft = parseInt(wflbUl.css('marginLeft'));
        // 设置新的 marginLeft 值，实现滚动效果
        wflbUl.css('marginLeft', marLeft + wflbSpeed);

        // 如果滚动超出容器宽度的一半，将 marginLeft 重置为 0，实现无缝滚动
        if (marLeft < -wflbUl.width() / 2) {
            wflbUl.css('marginLeft', '0');
        }
        // 如果滚动到了起始位置，将 marginLeft 重置为容器宽度的一半
        else if (marLeft > 0) {
            wflbUl.css('marginLeft', -wflbUl.width() / 2);
        }
    }

    // 鼠标悬停时清除滚动定时器，停止滚动
    wflbUl.hover(
        function () {
            clearInterval(wflbTimer);
        },
        function () {
            // 鼠标移开时重新启动滚动定时器
            wflbTimer = setInterval(wflbXX, 20);
        }
    );

    // 点击前一按钮时，反转滚动速度
    wflbPrev.click(function () {
        wflbSpeed = -wflbSpeed;
    });

    // 点击后一按钮时，恢复滚动速度
    wflbNext.click(function () {
        wflbSpeed = wflSpeed;
    });
}

// 倒计时函数，接受一个包含倒计时目标时间的数据属性 data-date
// 参数 time：包含倒计时目标时间的元素选择器
// jqdjs('.time');
function jqdjs(time) {
    // 定时器变量，用于更新倒计时
    var djStimer;

    // 格式化数字，如果数字小于 10，则在前面添加 '0'
    function ling(num) {
        if (num < 10) {
            return '0' + num;
        } else {
            return num;
        }
    }

    // 设置定时器，每秒更新一次倒计时
    djStimer = setInterval(function () {
        // 获取目标时间戳，从元素的 data-date 属性中获取
        var setTime = new Date($(time).attr('data-date').replace(/-/g, '/')).getTime();
        // 获取当前时间戳
        var nowTime = new Date().getTime();
        // 计算剩余时间（毫秒）
        var t = setTime - nowTime;

        // 初始化各时间单位的变量
        var Day = 0;
        var Hour = 0;
        var Min = 0;
        var s = 0;

        // 如果剩余时间大于等于 0，继续计算
        if (t >= 0) {
            Day = Math.floor(t / 1000 / 60 / 60 / 24); // 天
            Hour = Math.floor(t / 1000 / 60 / 60 % 24);  // 小时
            Min = Math.floor(t / 1000 / 60 % 60);         // 分钟
            s = Math.floor(t / 1000 % 60);                // 秒钟
        } else {
            // 如果剩余时间小于 0，清除定时器，倒计时结束
            clearInterval(djStimer);
        }

        // 更新页面上的倒计时显示
        $('.tian').html(ling(Day));  // 天
        $('.shi').html(ling(Hour));  // 小时
        $('.fen').html(ling(Min));   // 分钟
        $('.miao').html(ling(s));    // 秒钟
    }, 1000); // 每秒更新一次
}

// 进入可视区函数，接受一个元素选择器作为参数
// window.onscroll = function() {
//    // 调用进入可视区函数，传入要检测的元素选择器
//   intoClien('.div1');
//};
function intoClien(div) {
    // 获取要检测的元素
    var scrollElement = $(div);
    // 获取当前页面滚动的垂直位置
    var scrollTop = $(window).scrollTop();
    // 获取浏览器窗口的可视高度
    var client = $(window).height();
    // 计算元素底部在页面中的位置
    var intoClient = scrollTop + client;
    // 获取要检测元素相对于文档顶部的位置
    var elementTop = scrollElement.offset().top;
    // 获取要检测元素的高度
    var elementHeight = scrollElement.outerHeight();

    // 如果元素底部进入可视区域，给元素添加 'active' 类
    if (intoClient > elementTop) {
        scrollElement.addClass('active');
    }
    // 如果元素已经滚出可视区域，移除 'active' 类
    else if (elementTop > scrollTop + elementHeight) {
        scrollElement.removeClass('active');
    }
}

// 鼠标移入元素时，使目标元素透明移入显示
// 参数 div：目标元素的选择器
// 参数 img：触发事件的元素的选择器
// showOpacity('.your-target-element', '.your-trigger-element');
function showOpacity(div, img) {
    // 给目标元素添加鼠标移入事件监听
    $(div).on('mouseover', function () {
        // 鼠标移入时隐藏目标元素
        $(this).css('display', 'none');
    });

    // 给触发事件的元素添加鼠标移出事件监听
    $(img).on('mouseout', function () {
        // 鼠标移出时显示兄弟元素（即目标元素）
        $(this).siblings(div).css('display', 'block');
    });
}