js 个人的特效库

功能介绍

// 这段代码是在2016年6月5日创建的, 博主个人在项目里使用的特效库

函数实现

// 获取指定 class 名称的元素集合
// 参数 oParent：父元素对象，从该元素下查找指定 class 名称的元素
// 参数 className：要查找的 class 名称
// 获取 class 名称为 'da' 的第一个元素
// var cda = getClass(document, 'da')[0];
function getClass(oParent, className) {
    // 获取文档中所有元素
    var eLement = document.getElementsByTagName('*');
    var i = 0;
    var attr = [];

    // 遍历所有元素
    for (i = 0; i < eLement.length; i++) {
        // 如果元素的 className 与指定的 className 匹配，将该元素添加到结果数组中
        if (eLement[i].className == className) {
            attr.push(eLement[i]);
        }
    }

    return attr;
}

// 设置元素的样式属性
// 参数 obj：要设置样式的元素对象
// 参数 json：包含样式属性和值的对象
// 设置 cda 元素的背景颜色为绿色，高度为 200px
// setStyle(cda, { backgroundColor: 'green', height: '200px' });
function setStyle(obj, json) {
    var attr = '';

    // 遍历 json 对象，将样式属性和值应用到元素上
    for (attr in json) {
        obj.style[attr] = json[attr];
    }
}

// 添加指定的类名到元素的 className 属性中
// 参数 obj：要添加类名的元素对象
// 参数 className：要添加的类名
// 将类名 'red' 添加到元素 obj 的 className 中
// addClass(oLi[i], 'red');
function addClass(obj, className) {
    // 如果元素的 className 为空，直接将 className 设置为指定的类名
    if (obj.className == '') {
        obj.className = className;
    } else {
        // 否则，将元素的 className 按空格分割成数组
        var arrClassName = obj.className.split(' ');

        // 检查要添加的类名是否已经存在于数组中
        if (arrIndexOf(arrClassName, className) == -1) {
            // 如果不存在，将类名添加到数组末尾
            obj.className += ' ' + className;
        }
        // 如果类名已经存在，不重复添加
    }

// 查找指定值在数组中的索引，不存在返回 -1
// 参数 arr：要查找的数组
// 参数 v：要查找的值
    function arrIndexOf(arr, v) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] == v) {
                return i;
            }
        }
        return -1;
    }

}

// 获取元素指定属性的值，兼容IE和标准浏览器
// 参数 obj：要获取属性的元素对象
// 参数 attr：要获取的属性名
// getStyle(element, 'attribute-name')
function getStyle(obj, attr) {
    // 检测是否支持 currentStyle 属性（IE）或 getComputedStyle 方法（标准浏览器）
    if (obj.currentStyle) {
        // 使用 currentStyle 获取属性值（兼容IE）
        return obj.currentStyle[attr];
    } else {
        // 使用 getComputedStyle 获取属性值（标准浏览器）
        return getComputedStyle(obj, null)[attr];
    }
}

// 缓动运动框架函数
// 参数 obj：要执行运动的元素对象
// 参数 json：包含要运动的属性和目标值的对象
// 参数 fn：运动结束后的回调函数
// move(element, targetProperties, function () {
//     // 运动结束后的回调函数，可选
//     // 在这里执行运动结束后的操作
// });
function move(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var mStop = true; // 当所有的属性都到达目标值时为 true

        // 遍历要运动的属性
        for (var attr in json) {
            // 获取当前值
            var com = 0;
            if (attr == 'opacity') {
                com = parseInt(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                com = parseInt(getStyle(obj, attr));
            }

            // 计算速度
            var iSpeed = (json[attr] - com) / 8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

            // 检测是否所有属性都已到达目标值
            if (com != json[attr]) {
                mStop = false;
            }

            // 更新属性值
            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:' + (com + iSpeed) + ')';
                obj.style.opacity = (com + iSpeed) / 100;
            } else {
                obj.style[attr] = com + iSpeed + 'px';
            }
        }

        // 如果所有属性都到达目标值，清除定时器，并执行回调函数
        if (mStop) {
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }
    }, 30);
}

// 移除元素的指定类名
// 参数 obj：要移除类名的元素对象
// 参数 sClass：要移除的类名
// removeClass(targetElement, 'class-to-remove');
function removeClass(obj, sClass) {
    // 将元素的 className 属性按空格分割成数组
    var aClass = obj.className.split(' ');

    // 如果元素没有 className，直接返回
    if (!obj.className) return;

    // 遍历数组，查找要移除的类名
    for (var i = 0; i < aClass.length; i++) {
        if (aClass[i] === sClass) {
            // 找到匹配的类名后，从数组中移除该类名
            aClass.splice(i, 1);
            // 更新元素的 className 属性
            obj.className = aClass.join(' ');
            break;
        }
    }
}

// 无缝滚动轮播函数
// 参数 warp：包裹容器的 id
// 参数 ul：滚动容器的 id
// 参数 li：滚动元素的标签名
// 参数 next：下一页按钮的 id
// 参数 prev：上一页按钮的 id
// 参数 setIn：滚动间隔时间（毫秒）
// wgdlb('warp', 'ul', 'li', 'next', 'prev', 1000);
function wgdlb(warp, ul, li, next, prev, setIn) {
    var oWarp = document.getElementById(warp);
    var oUl = document.getElementById(ul);
    var oLi = oUl.getElementsByTagName(li);
    var oNext = document.getElementById(next);
    var oPrev = document.getElementById(prev);
    var num = 0;
    var timer = null;

    // 设置滚动容器的宽度，确保能容纳所有内容
    oUl.style.width = oUl.children.length * oUl.children[0].offsetWidth + "px";

    // 点击下一页按钮触发的函数
    function you() {
        num++;
        if (num < oLi.length) {
            oUl.style.marginLeft = num * -oLi[0].offsetWidth + 'px';
        } else {
            num = 0;
            oUl.style.marginLeft = num * -oLi[0].offsetWidth + 'px';
        }
    }

    // 点击上一页按钮触发的函数
    function zuo() {
        num--;
        if (num < 0) {
            num = oLi.length - 1;
            oUl.style.marginLeft = num * -oLi[0].offsetWidth + 'px';
        } else {
            oUl.style.marginLeft = num * -oLi[0].offsetWidth + 'px';
        }
    }

    // 设置定时器，自动滚动
    timer = setInterval(function () {
        you();
    }, setIn);

    // 鼠标悬停在包裹容器上时清除定时器，停止滚动
    oWarp.onmouseover = function () {
        clearInterval(timer);
    };

    // 鼠标移出包裹容器时重新启动定时器，继续滚动
    oWarp.onmouseout = function () {
        timer = setInterval(function () {
            you();
        }, setIn);
    };
}

// 无翻页器滚动轮播
// 参数 warp：包裹容器的 id
// 参数 prev：上一页按钮的 id
// 参数 next：下一页按钮的 id
// 参数 ul：滚动容器的 id
// 参数 set：滚动间隔时间（毫秒）
// ygdlb2('warp', 'prev', 'next', 'ul', 1000);
function ygdlb2(warp, prev, next, ul, set) {
    var warp = document.getElementById(warp);
    var prev = document.getElementById(prev);
    var next = document.getElementById(next);
    var ul = document.getElementById(ul);
    var li = ul.children;
    var num = 0;
    var timer = null;

    // 复制第一个元素并添加到末尾，实现无缝滚动
    ul.appendChild(li[0].cloneNode(true));
    ul.style.width = li[0].offsetWidth * li.length + 'px';

    // 给上一页和下一页按钮添加点击事件处理函数
    prev.onclick = zuo;
    next.onclick = you;

    // 清除并重新设置定时器，实现自动滚动
    clearInterval(timer);
    timer = setInterval(you, set);

    // 鼠标悬停在包裹容器上时清除定时器，停止滚动
    warp.onmouseover = function () {
        clearInterval(timer);
    };

    // 鼠标移出包裹容器时重新启动定时器，继续滚动
    warp.onmouseout = function () {
        timer = setInterval(you, set);
    };

    // 上一页按钮点击事件处理函数
    function zuo() {
        num--;
        if (num < 0) {
            num = li.length - 2;
            ul.style.marginLeft = -li[0].offsetWidth * (li.length - 1) + 'px';
        }
        move(ul, { marginLeft: -num * li[0].offsetWidth });
    }

    // 下一页按钮点击事件处理函数
    function you() {
        num++;
        if (num > li.length - 1) {
            num = 1;
            ul.style.marginLeft = 0;
        }
        move(ul, { marginLeft: -num * li[0].offsetWidth });
    }
}

// 带翻页器和类名的滚动轮播
// 参数 warp：包裹容器的 id
// 参数 prev：上一页按钮的 id
// 参数 next：下一页按钮的 id
// 参数 ul：滚动容器的 id
// 参数 fyq：翻页器容器的 id
// 参数 active：当前页的类名
// 参数 set：滚动间隔时间（毫秒）
// ygdlb('warp', 'prev', 'next', 'ul', 'fyq', 'active', 1000);
function ygdlb(warp, prev, next, ul, fyq, active, set) {
    var warp = document.getElementById(warp);
    var prev = document.getElementById(prev);
    var next = document.getElementById(next);
    var ul = document.getElementById(ul);
    var fyq = document.getElementById(fyq);
    var li = ul.children;
    var num = 0;
    var fyqnum = 0;
    var timer = null;

    // 复制第一个元素并添加到末尾，实现无缝滚动
    ul.appendChild(li[0].cloneNode(true));
    ul.style.width = li[0].offsetWidth * li.length + 'px';

    // 给上一页和下一页按钮添加点击事件处理函数
    prev.onclick = zuo;
    next.onclick = you;

    // 创建翻页器的页数
    for (var i = 0; i < li.length - 1; i++) {
        var span = document.createElement('span');
        fyq.appendChild(span);
        span.innerHTML = 1 + i;
    }

    // 清除并重新设置定时器，实现自动滚动
    clearInterval(timer);
    timer = setInterval(you, set);

    // 鼠标悬停在包裹容器上时清除定时器，停止滚动
    warp.onmouseover = function () {
        clearInterval(timer);
    };

    // 鼠标移出包裹容器时重新启动定时器，继续滚动
    warp.onmouseout = function () {
        timer = setInterval(you, set);
    };

    // 给第一个翻页器添加类名，表示当前页
    addClass(fyq.children[0], active);

    // 上一页按钮点击事件处理函数
    function zuo() {
        fyqnum--;
        if (fyqnum < 0) {
            fyqnum = li.length - 2;
        }
        for (var i = 0; i < li.length - 1; i++) {
            removeClass(fyq.children[i], active);
            addClass(fyq.children[fyqnum], active);
        }
        num--;
        if (num < 0) {
            num = li.length - 2;
            ul.style.marginLeft = -li[0].offsetWidth * (li.length - 1) + 'px';
        }
        move(ul, { marginLeft: -num * li[0].offsetWidth });
    }

    // 下一页按钮点击事件处理函数
    function you() {
        fyqnum++;
        if (fyqnum > li.length - 2) {
            fyqnum = 0;
        }
        for (var i = 0; i < li.length - 1; i++) {
            removeClass(fyq.children[i], active);
            addClass(fyq.children[fyqnum], active);
        }
        num++;
        if (num > li.length - 1) {
            num = 1;
            ul.style.marginLeft = 0;
        }
        move(ul, { marginLeft: -num * li[0].offsetWidth });
    }
}

// 带class切换效果
// 参数 zzp_bgul：包含切换内容的 ul 元素的 id
// 参数 uli：切换内容的标签名
// 参数 zzp_bgol：包含切换标签的 ul 元素的 id
// 参数 oli：切换标签的标签名
// yrqh('zzp_bgul', 'li', 'zzp_bgol', 'li');
function yrqh(zzp_bgul, uli, zzp_bgol, oli) {
    var oUl = document.getElementById(zzp_bgul);
    var oUli = oUl.getElementsByTagName(uli);
    var oOl = document.getElementById(zzp_bgol);
    var oOli = oOl.getElementsByTagName(oli);
    var i = 0;

    // 初始化第一个切换内容为显示，第一个切换标签为激活状态
    for (i = 0; i < oOli.length; i++) {
        oOli[i].index = i;
        oUli[i].style.display = 'none';
        oUli[0].style.display = 'block';
        addClass(oOli[0], 'active');
        oOli[i].onmouseover = function () {
            for (var j = 0; j < oOli.length; j++) {
                oUli[j].style.display = 'none';
                removeClass(oOli[j], 'active');
            }
            oUli[this.index].style.display = 'block';
            addClass(oOli[this.index], 'active');
        };
    }
}

// 无缝滚动效果
// 参数 wfgdul：包含滚动内容的 ul 元素的 id
// 参数 li：滚动内容的标签名
// 参数 speed：滚动速度
// wfgd('wfgdul', 'li', -2);
function wfgd(wfgdul, li, speed) {
    var oWfgdul = document.getElementById(wfgdul);
    var oLi = oWfgdul.getElementsByTagName(li);
    var timer = null;

    // 将滚动内容复制一份并追加到原内容后，实现无缝滚动
    oWfgdul.innerHTML += oWfgdul.innerHTML;
    oWfgdul.style.width = oLi.length * oLi[0].offsetWidth + 'px';

    // 设置定时器，实现滚动效果
    clearInterval(timer);
    timer = setInterval(function () {
        zuo();
    }, 30);

    // 鼠标悬停在滚动内容上时清除定时器，停止滚动
    oWfgdul.onmouseover = function () {
        clearInterval(timer);
    };

    // 鼠标移出滚动内容时重新启动定时器，继续滚动
    oWfgdul.onmouseout = function () {
        timer = setInterval(function () {
            zuo();
        }, 30);
    };

    // 滚动函数
    function zuo() {
        if (oWfgdul.offsetLeft < -oWfgdul.offsetWidth / 2) {
            oWfgdul.style.left = '0';
        } else if (oWfgdul.offsetLeft > 0) {
            oWfgdul.style.left = -oWfgdul.offsetWidth / 2 + 'px';
        }
        oWfgdul.style.left = oWfgdul.offsetLeft + speed + 'px';
    }
}

// 滚动固定顶部导航
// 参数 ID：顶部导航栏的 id
// gdnav('your-nav-id'); //为顶部导航栏的 id
function gdnav(ID) {
    window.onload = function () {
        var oNav = document.getElementById(ID);
        var offsetTop = oNav.offsetTop;

        // 监听页面滚动事件
        window.onscroll = function () {
            var scroll = document.documentElement.scrollTop || document.body.scrollTop;

            // 当滚动位置超过导航栏的原始位置时，将导航栏固定在页面顶部
            if (scroll > offsetTop) {
                oNav.style.position = 'fixed';
                oNav.style.zIndex = 1000;
                oNav.style.top = '0';
                oNav.style.left = '0';
            } else {
                oNav.style.position = 'static';
            }
        };
    };
}

// 拖拽函数
// 参数 obj：要拖拽的元素对象
// drag(draggableElement);
function drag(obj) {
    obj.onmousedown = function (ev) {
        var ev = ev || event;
        var disX = ev.clientX - this.offsetLeft;
        var disY = ev.clientY - this.offsetTop;

        if (obj.setCapture) {
            obj.setCapture();
        }

        document.onmousemove = function (ev) {
            var ev = ev || event;
            var L = ev.clientX - disX;
            var T = ev.clientY - disY;

            // 限制拖拽范围在可视区域内
            if (L < 0) {
                L = 0;
            } else if (L > document.documentElement.clientWidth - obj.offsetWidth) {
                L = document.documentElement.clientWidth - obj.offsetWidth;
            }

            if (T < 0) {
                T = 0;
            } else if (T > document.documentElement.clientHeight - obj.offsetHeight) {
                T = document.documentElement.clientHeight - obj.offsetHeight;
            }

            obj.style.left = L + 'px';
            obj.style.top = T + 'px';
        };

        document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null;

            if (obj.releaseCapture) {
                obj.releaseCapture();
            }
        };

        return false;
    };
}