JavaScript制作简单动画特效及注意问题（个人整理笔记）

最新推荐文章于 2025-05-25 09:37:29 发布

置顶

Kim丶

最新推荐文章于 2025-05-25 09:37:29 发布

阅读量2k

点赞数 7

分类专栏： JavaScript 文章标签： JavaScript制作动画特效 JavaScript JavaScript笔记

本文链接：https://blog.youkuaiyun.com/u010689561/article/details/82811276

版权

本文是关于使用JavaScript制作动画特效的个人整理笔记，涵盖了各种常见特效如无缝轮播图、固定导航栏、手风琴效果、旋转木马等，同时讨论了浏览器兼容性问题，如IE与其他浏览器事件对象的差异，以及如何处理。文章提供了关键代码和思路，适合JavaScript初学者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人理解：所谓的动画，就是利用定时器，把元素的属性按某一规律变化的过程。
在函数内利用参数当css属性时，style[attr] <==> style.arr，比如arr等于border。

注意问题

IE和其他浏览器的兼容，IE的事件对象和其他浏览器的事件对象不同，IE为window.event，而其他浏览器的函数中默认有e的事件对象。
把a标签的href设置为javascript:void(0)实现不跳转，也表示这个a标签是为某种功能而采用的，不是为跳转而设置的。
凡是与滚动有关的或者某一东西跟着动的，大多数与滚动scoll系列有关，还用到offset系列、鼠标的clientX、clientY等。
凡是与动画有关的，大多数与属性的改变有关，比如width，height，top，left，透明度等等，而且是按某一规律（公式）。

参考

Bootstrap 参考https://v4.bootcss.com/

fullPage.js 参考http://www.dowebok.com/77.html

normalize.css 初始化CSS

html5shiv.min.js ie8及以下兼容h5

项目特效及兼容代码

兼容代码

设置元素文本内容

/**
 * 设置元素的文本内容
 * @param element 任意元素
 * @param text 任意文本内容
 */
function setInnerText(element, text) {
    
    if (typeof(element.textContent) == "undefined") {
    
        element.innerText = text;
    } else {
    
        element.textContent = text;
    }
}

获取元素文本内容

/**
 * 获取元素的文本内容
 * @param element 任意元素
 * @returns {*} 任意元素中的文本内容
 */
function getInnerText(element) {
    
    if (typeof(element.textContent) == "undefined") {
    
        return element.innerText;
    } else {
    
        return element.textContent;
    }
}

为任意一个元素绑定事件

//为任意一个元素绑定事件:元素,事件类型,事件处理函数
function addEventListener(element,type,fn) {
    
    if(element.addEventListener){
    
        element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
     //IE支持
        element.attachEvent("on"+type,fn);
    }else{
    
        element["on"+type]=fn;
    }
}

为任意的一个元素解绑某个事件

//为任意的一个元素解绑某个事件:元素,事件类型,事件处理函数
function removeEventListener(element,type,fn) {
    
    if(element.removeEventListener){
    
        element.removeEventListener(type,fn,false);
    }else if(element.detachEvent){
    
        element.detachEvent("on"+type,fn);
    }else{
    
        element["on"+type]=null;
    }
}

获取的是页面向上或者向左卷曲出去的距离的值

/**
 * 获取的是页面向上或者向左卷曲出去的距离的值,返回的是对象
 * @returns {
    {top: (Number|number), left: (Number|number)}}
 */
function getScroll() {
    
    return {
    
        top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0,
        left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft||0
    };
}

获取内部样式表或外部样式表属性

/*
* element---任意的元素
* attr---属性
* */
function getAttrValue(element,attr) {
    
    return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0;
}

动画函数

/*
* 终极版本的动画函数---有bug
* */
function animate(element,json,fn) {
    
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
    
        var flag=true;//假设都达到了目标
        for(var attr in json){
    
            if(attr=="opacity"){
    //判断属性是不是opacity
                var current= getAttrValue(element,attr)*100;
                //每次移动多少步
                var target=json[attr]*100;//直接赋值给一个变量,后面的代码都不用改
                var step=(target-current)/10;//(目标-当前)/10
                step=step>0?Math.ceil(step):Math.floor(step);
                current=current+step;
                element.style[attr]=current/100;
            }else if(attr=="zIndex"){
    //判断属性是不是zIndex
                element.style[attr]=json[attr];
            }else{
    //普通的属性

                //获取当前的位置----getAttrValue(element,attr)获取的是字符串类型
                var current= parseInt(getAttrValue(element,attr))||0;
                //每次移动多少步
                var target=json[attr];//直接赋值给一个变量,后面的代码都不用改
                var step=(target-current)/10;//(目标-当前)/10
                step=step>0?Math.ceil(step):Math.floor(step);
                current=current+step;
                element.style[attr]=current+"px";
            }
            if(current!=target){
    
                flag=false;//如果没到目标结果就为false
            }
        }
        if(flag){
    //结果为true
            clearInterval(element.timeId);
            if(fn){
    //如果用户传入了回调的函数
                fn(); //就直接的调用,
            }
        }
        console.log("target:"+target+"current:"+current+"step:"+step);
    },10);
}

clientX、clientY和pageX、pageY及事件对象

    //window.event和事件参数对象e的兼容
    //clientX和clientY单独的使用的兼容代码
    //scrollLeft和scrollTop的兼容代码
    //pageX,pageY和clientX+scrollLeft 和clientY+scrollTop
    //把代码封装在一个函数
    //把代码放在一个对象中
    var evt = {
    
        //window.event和事件参数对象e的兼容
        getEvent: function (evt) {
    
            return window.event || evt;
        },
        //可视区域的横坐标的兼容代码
        getClientX: function (evt) {
    
            return this.getEvent(evt).clientX;
        },
        //可视区域的纵坐标的兼容代码
        getClientY: function (evt) {
    
            return this.getEvent(evt).clientY;
        },
        //页面向左卷曲出去的横坐标
        getScrollLeft: function () {
    
            return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
        },
        //页面向上卷曲出去的纵坐标
        getScrollTop: function () {
    
            return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
        },
        //相对于页面的横坐标(pageX或者是clientX+scrollLeft)
        getPageX: function (evt) {
    
            return this.getEvent(evt).pageX ? this.getEvent(evt).pageX : this.getClientX(evt) + this.getScrollLeft();
        },
        //相对于页面的纵坐标(pageY或者是clientY+scrollTop)
        getPageY: function (evt) {
    
            return this.getEvent(evt).pageY ? this.getEvent(evt).pageY : this.getClientY(evt) + this.getScrollTop();
        }
    };

无缝轮播图

利用li横排布局图片，overflow设置为hidden。
首尾图片一样。
当移到最后一张图片时立即跳回第一张。if判断距离（即宽度）
轮播ul设为绝对定位，利用ul的left进行移动，看像是图片移动的效果。
轮播图一排的圆点用ul-li做，用排他功能做特效，先全部取消特效，再特定一个给特效。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }
        ul {
     
            list-style: none;

        }
        img {
     
            vertical-align: top;
        }
        /*取消图片底部3像素距离*/
        .box {
     
            width: 300px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            border: 1px solid red;
            position: relative;
            overflow: hidden;
        }
        .box ul li {
     
            float: left;
        }
        .box ul {
     
            width: 1500px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div class="box" id="screen">
    <ul>
        <li><img src="../images/01.jpg" alt=""/></li>
        <li><img src="../images/02.jpg" alt=""/></li>
        <li><img src="../images/03.jpg" alt=""/></li>
        <li><img src="../images/04.jpg" alt=""/></li>
        <li><img src="../images/01.jpg" alt=""/></li>
    </ul>
</div>
<script>
    var current = 0;//只声明了一次
    function f1() {
     
        var ulObj = document.getElementById("screen").children[0];
        current -= 10;
        //重点代码
        if (current < -1200) {
     
            ulObj.style.left = 0 + "px";
            current = 0;
        } else {
     
            ulObj.style.left = current + "px";
        }
    }
    var timeId = setInterval(f1, 20);
    document.getElementById("screen").onmouseover = function () {
     
        //停止
        clearInterval(timeId);
    };
    document.getElementById("screen").onmouseout = function () {
     
        //继续
        timeId = setInterval(f1, 20);
    };
</script>
</body>
</html>

百度搜索辅助

利用onkeyup事件
用string对象的.indexof判断符合内容放入另一个数组。
根据数组来判断是否需创建div，以及添加子节点。
创建div前判断是否之前就有div，有就先移出再建。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
     
            width: 450px;
            margin: 200px auto;
        }
        #txt {
     
            width: 350px;
        }
        #dv {
     
            overflow: hidden;
        }
        p {
     
            margin: 3px 5px;
            padding: 0;
            cursor: pointer;
        }
        p:hover {
     
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="box">
    <input type="text" id="txt"/>
    <input type="button" value="搜索" id="btn"/>
</div>
<script>
    var keyWords = ["我很帅", "我真的很帅", "我真的非常帅", "我帅", "我帅帅帅"];
    var txt = document.getElementById("txt");
    txt.onkeyup = function (ev) {
     
        if (document.getElementById("dv")) {
     
            document.getElementById("box").removeChild(document.getElementById("dv"));
        }
        var text = this.value;//保存输入内容
        var tempArr = [];
        for (var i = 0; i < keyWords.length; i++) {
     
            if (keyWords[i].indexOf(text) == 0) {
     //判断内容是否符合
                tempArr.push(keyWords[i]);
            }
        }
        //如果输入内容为空或者符合的内容数组长度为0，移除div
        if (this.value.length == 0 || tempArr.length == 0) {
     
            if (document.getElementById("dv")) {
     
                document.getElementById("box").removeChild(document.getElementById("dv"));
            }
        } else {
     
            if (!document.getElementById("dv")) {
     
                var divObj = document.createElement("div");
                document.getElementById("box").appendChild(divObj);
                divObj.id = "dv";
                divObj.style.width = "350px";
                divObj.style.border = "1px solid green";
            }

            for (var i = 0; i < tempArr.length; i++) {
     
                var pObj = document.