用js实现一个无限循环的动画

建立移动函数，e.style.left = ` ${left++}px`
当flag=true时，left++,当left>=100,flag取反
当flag=false时，left--,当left<=0,flag取反

方法1：用setInterval(function（），1000/60）执行上面函数

方法2：用window.requestAnimationFrame()实现

(function dd(){

render()

window.requestAnimationFrame(dd)

})()

<!doctype html>
<html lang="en">
<head><title>Document</title><style>#e{width: 100px;height: 100px;background: red;position: absolute;left: 0; }</style>
</head>
<body>
<div id="e"></div>
<script>var e = document.getElementById("e");var flag = true;var left = 0;function render() {if(flag==true){if(left>=100){flag=false}e.style.left=`${left++}px`}else{if(left<=0){flag=true}e.style.left=`${left--}px`}}/*setInterval(function(){render()},1000/60)*/(function dd(){render()window.requestAnimationFrame(dd)})()</script>
</body>
</html>

用js实现一个无限循环的动画相关推荐

用C语言编写一个无限循环语句
今天比较无聊,看了些基本的for循环和while循环语句,就利用它们的特性编写一个无限循环语句. 代码如下: #include <stdio.h>int main () {for( ; ; ...
react无缝滚动_react 实现一个无限循环的轮播器附github地址
一个简单的轮播为了更具有通用和参考性,轮播组件中,轮播只使用了react,没有添加其他的状态管理,或者参数类型限制的库. 所以这个轮播的方法,同样可以用于vue 等其他框架 github地址最终效 ...
CSS - 音乐盒 360° 无限循环旋转动画（元素转圈）
前言由于 Gif 图片过小的问题,显得很不流畅,真实情况下很流畅,放心. 实现一个 360° 无限循环旋转的动画,如下图所示: 示例代码注意:通过 animation 复合属性,可控制动画旋转速度 ...
使用three.js做一个网页的相册动画
想了很久不知道有没有必要,但还是记录下来,以后说不定还会用的到,希望大家也有机会试试就先做一个简单的页面,做一下动画,放一些图片吧,以后有新东西还是会加进来的 1.先创建一个html文件,初始化代码 ...
服务器开一个无限循环的线程可以吗,如何使用无限循环的目标函数创建一个可停止的线程...
假设我想在一个线程中运行一个名为run_forever()的函数,但是按Ctrl C仍然可以让它"停止".我已经看到了使用threading.Thread的StoppableThr ...
css+js实现一个跳动的loading动画效果
css+js实现跳动的loading动画 <!DOCTYPE html> <html lang="en"><head><meta char ...
android 无限旋转动画,Android 属性动画之无限循环缩放动画，旋转动画
缩放动画 AnimatorSet animatorSetsuofang = new AnimatorSet();//组合动画 ObjectAnimator scaleX = ObjectAnimato ...
使用svg+js实现一个完成打钩动画
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
围观一个无限循环的奇葩代码，把电脑弄死机了
A=['Adam', 'Lisa', 'Bart', 'Paul'] for i in A:j=i.lower()A.append(j)

用js实现一个无限循环的动画

用js实现一个无限循环的动画相关推荐

最新文章

热门文章