js 实现简单的动画效果（小圆移动）

最新推荐文章于 2023-03-26 13:43:26 发布
最新推荐文章于 2023-03-26 13:43:26 发布
阅读量3.3k 收藏 4
点赞数 3
分类专栏： javascript 运动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sweetllh/article/details/70231362
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation</title>
    <style type="text/css" media="screen">
        *{
            padding: 0;
            margin: 0;
        }

        #box{
            height: 100px;
            width: 100px;
            background: #f00;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box" style="top:0;left:0"></div>

</body>
<script>
    var box=document.getElementById('box');
    var xSpeed=2;
    setInterval(function(){
        var x=parseInt(box.style.left)+xSpeed;
        //给动画设置边界
        if(x>800) xSpeed*=-1;
        else if(x<0) xSpeed*=-1;
        box.style.left=x+'px';
    },1000/60);
</script>
</html>
sweetllh
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js事件之动画效果 滚动的小球
margin0auto的博客
11-13 1636
目标：做一个小球滚动的动画效果 首先设置基本框架 向左 向右 暂停 向下 向上 之后设置样式 #box { width: 100px; height: 100px; background: red; border-radius: 50%; position: absolute; left: 5...
js 简单的小球动画移动
新入菜鸟
01-25 3543
创建一个简单的代码 首先在body里创建一个球；设置它的css样式： 然后用js编写代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;小球动画移动&lt;/title&gt; &lt;style type
RotateAnimation:按钮沿着圆形的轨迹移动动画效果
06-06
RotateAnimation 按钮沿着圆形的轨迹移动动画效果 使用说明: //首先，实例化动画视图，设置视图尺寸位置和视图里的旋转按钮的宽高。 RotateAnimationView *rotateAnimationView = [RotateAnimationView rotateAnimationViewWithFrame:self.view.bounds rotateItemSize:CGSizeMake(60, 60)]; //设置背景图片 rotateAnimationView.animationViewBackgroundColor = [UIColor whiteColor]; //设置中心圆形的图像视图图片 rotateAnimationView.centralFigureImage = [UIImage imageNamed:@"sun"]; //设置动画视图代理方法
通过js滚轮滚动时调用动画_js实现盒子滚动动画效果
weixin_30350163的博客
12-22 416
本文实例为大家分享了js实现盒子滚动动画效果的具体代码，供大家参考，具体内容如下1、效果图1:2、效果图2：3、源代码如下：Document*{margin: 0;padding: 0;}.box1{/* 必须加定位才可以动 */position: absolute;left: 0;width: 50px;height: 50px;background-color: blueviolet;}// ...
Three.js不同模型在不同轨道上的动画和移动
Mr_Bobcp的博客
03-26 3142
Three.js不同模型在不同轨道上的动画和移动
js------使用定时调用来实现使盒子移动的动画效果（循环定时器setInterval(function(){},循环时间)
weixin_52551539的博客
12-27 1017
注：获取元素样式的函数的缺点：再ie浏览器中，如果获取的样式事先没有指定，那他会返回auto，所以在使用这个函数时，对与没有设置的样式，先给他指定一个值
运用js实现物体的圆周运动
old_village的博客
02-11 2334
运用js实现圆周运动，要注意三点： 1：物体运动的圆心 2：物体运动的半径 3：物体发生运动的速度 第一步：编写一个div 对div进行设置样式 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/titl
Animate如何动态绘制元件运动路径(AS3)
FlashASer的博客
02-23 1518
在Animate中，使用AS3脚本可以实现一些纯动画比较复杂的动画效果，这里讲一下使用代码实现动态绘制元件运动路径的过程。 适用软件：Animate软件及支持AS3脚本的Flash软件 操作步骤： 1.这里使用的是Animate 2021，新建一个Actionscript3.0文档 2.在舞台中使用椭圆工具绘制一个圆形，如图 3.新建一个图层，使用铅笔工具绘制一条曲线 4.选择曲线层，右键选择引导层，如图 5.将圆形转换为影片剪辑，并设置实例名为mc 6.将元件制作成为沿曲线移动的补间动画 7.
【Anime.js】——用Anime.js实现动画效果
qq_50497708的博客
12-16 1745
第二个动画不是等到第一个动画结束才开始，是在整个时间轴执行30ms之后开始的，设置Number类型的时间偏移量。现在看到的效果就是，它运动完一个点，跑到下一个点的时候就停止了，我们如何让他一直是动态的呢？是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。实现自动选点，对该点进行先缩小后放大如何回到比其他点大一点的状态，并以该点从外向内放大。这两个点不是同时执行的，要让他们有一个交错的效果，给第二个动画设置delay。（1）先实现红色小圆点的动画效果。
javascript动画之圆形运动,环绕鼠标运动作小球
10-29
javascript动画之圆形运动,环绕鼠标运动作小球(兼容ie,ff,chrome,……)
VUE 与 React 波浪动画效果
08-15
vue 及 react 实现 波浪小球动画效果。使用three.js 实现。可以跟随鼠标移动展示。
JS实现随机乱撞彩色圆球特效的方法
12-01
本文实例讲述了JS实现随机乱撞彩色圆球特效的方法。分享给大家供大家参考。具体实现方法如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS实现的...
在圆圈内拖动动画
03-29
拖动中心圆圈往边上拖动，显示辐射状动画，周边圆圈成星星眨眼装动画， 拖动动画 发散动画
html5 canvas鼠标圆点粒子交互式动画特效
06-11
一款炫酷的html5 canvas鼠标圆点粒子交互式动画特效，可自定义设置粒子数量和大小颜色等，点击或移动鼠标进行交互。
JS的三种输出方式
热门推荐
sweetllh的博客
04-15 6万+
1.window.alert(”)，弹框效果，window可省略。弹出比较突然，用户的体验不好，基本用来测试代码使用。<script type="text/javascript"> /* * window.alert() 把小括号里的内容，以弹窗的方式显示出来 * window是BOM对象，指的是整个浏览器，可以省略不写 * '我是李康达，我为GDP代言'
编写一个js函数用来求n的阶乘
sweetllh的博客
07-01 2万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //求阶乘n! 即，1×2×3×4×5×······×n（使用递归
表格插件汇总
sweetllh的博客
02-03 1万+
常用表格插件附官网或中文网： Datatables、EasyUI Datagrid 数据网格、pqgrid、jqGrid、bootstrap-table 一、Datatables 中文网：http://www.datatables.club/ Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 增删改查功能完整： 1、
js实现按钮改变背景颜色
sweetllh的博客
04-20 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style media="screen"> *{ margin: 0; padding: 0; } ul{
使用html，css，js 实现烟花效果
最新发布
08-26
好的，以下是使用HTML、CSS和JavaScript实现烟花效果的示例代码： HTML 代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>烟花效果</title> <style> canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <canvas id="canvas"></canvas> <script src="firework.js"></script> </body> </html> ``` CSS 代码： 上面的 HTML 代码中已经包含了 CSS 样式。 JavaScript 代码： ``` // 定义常量 const GRAVITY = 0.05; const FRICTION = 0.99; // 获取 canvas 元素 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 设置 canvas 大小 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 烟花类 class Firework { constructor() { // 随机生成烟花发射的位置和角度 this.x = Math.random() * canvas.width; this.y = canvas.height; this.angle = Math.random() * Math.PI * 2; // 随机生成烟花的颜色 this.color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`; // 烟花的速度和加速度 this.velocity = { x: Math.sin(this.angle) * 5, y: Math.cos(this.angle) * 5 }; this.gravity = { x: 0, y: GRAVITY }; // 记录烟花是否已经爆炸 this.exploded = false; // 烟花爆炸后的粒子 this.particles = []; } // 更新烟花的状态 update() { // 如果烟花没有爆炸 if (!this.exploded) { // 更新烟花的速度和位置 this.velocity.x *= FRICTION; this.velocity.y *= FRICTION; this.velocity.y -= this.gravity.y; this.x += this.velocity.x; this.y -= this.velocity.y; // 如果烟花到达顶部，则触发爆炸效果 if (this.velocity.y >= 0) { this.explode(); } } else { // 更新烟花粒子的位置和透明度 for (let i = 0; i < this.particles.length; i++) { this.particles[i].velocity.x *= FRICTION; this.particles[i].velocity.y *= FRICTION; this.particles[i].velocity.y += this.gravity.y; this.particles[i].x += this.particles[i].velocity.x; this.particles[i].y += this.particles[i].velocity.y; this.particles[i].alpha -= 0.01; } // 移除已经消失的烟花粒子

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值