JavaScript 动画效果

最新推荐文章于 2024-06-04 11:29:46 发布
最新推荐文章于 2024-06-04 11:29:46 发布
阅读量8k 收藏 78
点赞数 15
分类专栏： # JavaScript 文章标签： JavaScript 动画效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14876133/article/details/117758337
版权

文章目录

JS动画实现

概述

  • 在CSS3中可以通过transition过渡属性可以实现动画
  • JS可以利用CSS3中的transition属性实现元素动画

匀速动画

JS封装匀速动画

在这里插入图片描述

<button id="btn">开始动画</button>
<div id="box"></div>

var btn = document.querySelector("#btn");
var box = document.querySelector("#box");

var timer = null;
var left = 0;

function animation(target, distance, time) {
    var each = parseInt(distance / time * 30);
    clearInterval(timer);
    timer = setInterval(function() {
        if (left >= distance) {
            clearInterval(timer);
        } else {
            left += each;
            target.style.left = left + "px";
        }
    }, 30);
};

btn.onclick = function() {
    animation(box, 800, 2000);
};

利用CSS transition属性实现平滑动画效果

在这里插入图片描述

<button>开始动画</button>
<div id="box"></div>

<script>
    var btn = document.querySelector("button");
    var box = document.querySelector("#box");
    btn.onclick = function() {
        box.style.transition = "all 2s linear 0s";
        box.style.left = "800px";
    };
</script>

缓速动画

var btn = document.querySelector("#btn");
var box = document.querySelector("#box");

var timer = null;
var left = 0;

function animation(target, distance) {
    clearInterval(timer);
    timer = setInterval(function() {
        if (left >= distance) {
            clearInterval(timer);
        } else {
            var step = (distance - left) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            left += step;
            target.style.left = left + "px";
        }
    }, 30);
};

btn.onclick = function() {
    animation(box, 800);
};

无缝连续滚动特效

在这里插入图片描述

<div id="banner" class="banner">
    <ul id="list">
        <li><img src="images/0.png" alt=""></li>
        <li><img src="images/1.png" alt=""></li>
        <li><img src="images/2.png" alt=""></li>
        <li><img src="images/3.png" alt=""></li>
        <li><img src="images/4.png" alt=""></li>
        <li><img src="images/5.png" alt=""></li>
    </ul>
</div>

* {
    margin: 0;
    padding: 0;
}

.banner {
    width: 1000px;
    height: 130px;
    border: 1px solid red;
    margin: 50px auto;
    overflow: hidden;
}

.banner ul {
    list-style: none;
    width: 5000px;
    position: relative;
}

.banner ul li {
    float: left;
    margin-right: 10px;
}

var banner = document.querySelector("#banner");
var list = document.querySelector("#list");

list.innerHTML += list.innerHTML;

var left = 0;
var timer = null;

startMove();

function startMove() {
    clearInterval(timer);
    timer = setInterval(function() {
        left -= 4;
        if (left <= -1260) {
            left = 0;
        }
        list.style.left = left + "px";
    }, 20);
}

function stopMove() {
    clearInterval(timer);
}

banner.onmouseenter = function() {
    stopMove();
};

banner.onmouseleave = function() {
    startMove();
};

轮播图

在这里插入图片描述

<div id="banner" class="banner">
    <ul id="list">
        <li><img src="images/0.png" alt=""></li>
        <li><img src="images/1.png" alt=""></li>
        <li><img src="images/2.png" alt=""></li>
        <li><img src="images/3.png" alt=""></li>
        <li><img src="images/4.png" alt=""></li>
        <li><img src="images/5.png" alt=""></li>
    </ul>
    <a id="leftBtn" class="left-btn" href="javascript:;">&lt;</a>
    <a id="rightBtn" class="right-btn" href="javascript:;">&gt;</a>
</div>

* {
    margin: 0;
    padding: 0;
}

.banner {
    width: 650px;
    height: 360px;
    border: 1px solid red;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
}

.banner ul {
    list-style: none;
    width: 5000px;
    height: 100%;
    position: relative;
    left: 0;
}

.banner ul li {
    float: left;
}

.banner ul li img {
    width: 650px;
    height: 360px;
}

.banner a {
    text-decoration: none;
    color: white;
    text-align: center;
    line-height: 50px;
}

.banner .left-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 20px;
    top: 50%;
    margin-top: -25px;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
}

.banner .right-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    right: 20px;
    top: 50%;
    margin-top: -25px;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
}

var banner = document.querySelector("#banner");
var dot = document.querySelector("#banner #dot");
var list = document.querySelector("#list");
var leftBtn = document.querySelector("#leftBtn");
var rightBtn = document.querySelector("#rightBtn");

var firstLi = list.lastElementChild.cloneNode(true);
var lastLi = list.firstElementChild.cloneNode(true);
list.insertBefore(firstLi, list.firstElementChild);
list.appendChild(lastLi);

//总长度
var length = list.childElementCount;

//当前显示第几页
var index = 1;

//节流锁
var lock = false;

function setPage(index) {
    list.style.transition = "left .5s ease 0s";
    list.style.left = -index * 650 + "px";
}

setPage(index);


rightBtn.onclick = function() {
    if (lock) {
        return;
    }
    lock = true;

    index++;

    setPage(index);

    if (index === length - 1) {
        setTimeout(function() {
            index = 1;
            list.style.transition = "none";
            list.style.left = -index * 650 + "px";
        }, 500);
    }

    setTimeout(function() {
        lock = false;
    }, 500);
};

leftBtn.onclick = function() {
    if (lock) {
        return;
    }
    lock = true;

    index--;
    setPage(index);

    if (index === 0) {
        setTimeout(function() {
            index = length - 2;
            list.style.transition = "none";
            list.style.left = -index * 650 + "px";
        }, 500);
    }

    setTimeout(function() {
        lock = false;
    }, 500);
};

轮播图淡入淡出效果

在这里插入图片描述

<div id="banner" class="banner">
    <ul id="list">
        <li><img src="images/0.png" alt=""></li>
        <li><img src="images/1.png" alt=""></li>
        <li><img src="images/2.png" alt=""></li>
        <li><img src="images/3.png" alt=""></li>
        <li><img src="images/4.png" alt=""></li>
        <li><img src="images/5.png" alt=""></li>
    </ul>
    <a id="leftBtn" class="left-btn" href="javascript:;">&lt;</a>
    <a id="rightBtn" class="right-btn" href="javascript:;">&gt;</a>
</div>

* {
    margin: 0;
    padding: 0;
}

.banner {
    width: 650px;
    height: 360px;
    border: 1px solid red;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
}

.banner ul {
    list-style: none;
    width: 5000px;
    height: 100%;
    position: relative;
    left: 0;
}

.banner ul li {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease 0s;
}

.banner ul li:first-child {
    opacity: 1;
}

.banner ul li img {
    width: 650px;
    height: 360px;
}

.banner a {
    text-decoration: none;
    color: white;
    text-align: center;
    line-height: 50px;
}

.banner .left-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 20px;
    top: 50%;
    margin-top: -25px;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
}

.banner .right-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    right: 20px;
    top: 50%;
    margin-top: -25px;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
}

var banner = document.querySelector("#banner");
var lis = document.querySelectorAll("#list li");
var leftBtn = document.querySelector("#leftBtn");
var rightBtn = document.querySelector("#rightBtn");

var index = 0;
var length = lis.length;
var lock = false;

rightBtn.onclick = function() {
    if (lock) {
        return;
    }
    lock = true;

    lis[index].style.opacity = 0;
    index++;
    if (index >= length) {
        index = 0;
    }
    lis[index].style.opacity = 1;

    setTimeout(function() {
        lock = false;
    }, 1000);
};
leftBtn.onclick = function() {
    if (lock) {
        return;
    }
    lock = true;

    lis[index].style.opacity = 0;
    index--;
    if (index < 0) {
        index = length - 1;
    }
    lis[index].style.opacity = 1;

    setTimeout(function() {
        lock = false;
    }, 1000);
};
xiangxiongfly915
关注
  • 15
    点赞
  • 踩
  • 78
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
分享112个JS特效动画效果，总有一款适合您
adendean的博客
02-05 415
JS
Javascript动画效果（2）
10-21
主要为大家详细介绍了第二篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【JavaScript-动画原理】如何使用js进行动画效果的实现
热门推荐
zhaochen1127的博客
09-25 1万+
利用js实现动画效果
Particles.js 做出各种炫酷粒子动画，动态粒子效果！
最新发布
weixin_39842602的博客
06-04 1175
Particles.js是一个轻量级的JavaScript库，用于在Web页面上创建和管理动态粒子效果。它允许开发者通过简单的配置文件实现复杂的动画效果，为网页增添视觉吸引力。粒子可以是点、线、图像等，能够根据用户交互进行动态变化，Particles.js能够极大地增强用户体验。
分享116个JS特效动画效果，总有一款适合您
zy0412326的专栏
02-05 1024
js
js实现页面动态加载效果(三个点)
123456
11-07 334
实现方式：利用定时函数给div定时添加或去除背景色【记得引入jquery】1：每次修改背景色的时候可以修改大小，使用方法。2：每次的背景色使用规定的不同颜色。
12个强大的 JavaScript 动画库，可帮助你提升用户体验
夜空孤狼啸的博客
01-26 1150
作为开发人员，利用这些工具无疑将增强您的项目，并使其在竞争日益激烈的数字环境中脱颖而出。网络借鉴，如有侵权，联系我删除。
javascript动画效果打开/关闭层
10-30
JavaScript动画效果在网页交互设计中扮演着重要角色，它可以为用户带来更加生动、直观的体验。本示例主要讲解如何使用JavaScript实现一个简单的打开和关闭层的动画效果。层（Layer）通常指的是网页上的某个可操作的...
Javascript动画效果（1）
10-21
主要为大家详细介绍了第一篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Javascript动画效果（4）
10-21
主要为大家详细介绍了第四篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript动画效果类封装代码
10-30
javascript动画效果类封装代码
wow.js 动态效果插件
06-07
wow.js 动态效果插件
js 图片动态效果
07-21
js 图片动态效果
HTML、CSS、JS创作炫酷的“文字雨“动画！
weixin_54239638的博客
11-07 434
最后，使用JavaScript来实现文字雨的效果。通过动态生成并随机选择字符，可以实现让这些字符(雨滴)从.cloud(云朵)中降落的效果。最近有点空闲时间打算学习一些有意思的动画，浏览和学习的过程中发现了文字雨的动画，仅此博客记录分享一下代码。链接：https://juejin.cn/post/7270648629378367528。函数和一个时间间隔值来调用。
用HTML Canvas和JavaScript创建美丽的花朵动画效果
@HNUSTer的博客
02-15 1250
这段代码使用HTML Canvas和JavaScript实现了一个美丽的花朵动画效果。代码中通过使用canvas元素和其上下文对象来绘制花朵的路径曲线和花瓣。其中，花朵的路径曲线是由数学公式计算得出的，并随着时间的推移而不断变化。花瓣是通过将临时canvas元素中的图形复制多次而生成的，形成了一个完整的花朵。此外，代码中还包含了一些交互功能，如点击canvas来清空临时canvas并重新开始动画。
【JS】常用效果总结
ianutt的博客
04-30 647
js常用效果总结
js的特效
m0_46420078的博客
12-01 1737
一、js的特效 1、offsset：偏移量，通过offset的属性可以动态的获得元素的大小、位置 offsetLeft：相对于父元素左边框的偏移量 offsetTop：相对于父元素上边框的偏移量 offsetWidth：返回元素自身的宽度（padding、边框、内容区域)，不带单位 offsetHeight：返回元素自身的高度（padding、边框、内容区域)，不带单位 offsetParent：返回元素的父元素 ...
javascript动画效果简单
12-16
以下是一个使用JavaScript实现的简单动画效果的例子： ```html <!DOCTYPE html> <title>JavaScript Animation #mydiv { width: 50px; height: 50px; background-color: green; position: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值