摘要:编写涉及在线演示代码代码代码必须先清除,否者多次点击会生成多个动画帧,导致元素移动速度加快若有疑问或错误,请留言,谢谢
[toc]
编写涉及:css, html, js
在线演示codepen
html代码css代码move
.roll-box { position: relative; width: 600px; height: 400px; background: #007acc; overflow: hidden; color: #fff; } .inner-box { position: absolute; top: 10px; left: 0; width: 50px; height: 50px; text-align: center; line-height: 50px; background-color: rgb(245, 152, 30); } button{ margin-top: 20px; padding: 6px 10px; border: 0; color: #fff; background-color: rgb(39, 133, 240); }JavaScript代码
let moveCount = 0; let rafId = ""; const ele = document.querySelector(".inner-box"); window.requestAniFrame = (function () { return window.requestAnimationFrame // Older versions Chrome/Webkit window.webkitRequestAnimationFrame || // Firefox < 23 window.mozRequestAnimationFrame || // opera window.oRequestAnimationFrame || // ie window.msRequestAnimationFrame || function (callback) { return window.setTimeout(callback, 1000 / 60); }; })() window.cancelAnimation = (function () { return window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.cancelRequestAnimationFrame || function (id) { clearTimeout(id) } })() function moveFn() { ele.setAttribute("style", "left:" + moveCount + "px"); moveCount++ if (moveCount > 550) { window.cancelAnimation(rafId) } else { rafId = window.requestAniFrame(moveFn) } } function startMove() { // 必须先清除,否者多次点击会生成多个动画帧,导致元素移动速度加快 window.cancelAnimation(rafId) rafId = window.requestAniFrame(moveFn) }
若有疑问或错误,请留言,谢谢!Github blog issues
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/101261.html
摘要:本文将针对使用生态开发完成的网站,以版本为基础兼容目标,实现全功能正常使用的全面兼容解决方案。这样做的目的,是逐步减少全局性方法,使得语言逐步模块化。此外,使用这个,一旦页面不处于浏览器的当前标签,就会自动停止刷新。 前言 背景情况 vue - 2.5.11 vue-cli 使用模板 webpack-simple http请求:axios Vue 官方对于 ie 浏览器版本兼容情...
摘要:编写涉及在线演示代码代码代码必须先清除,否者多次点击会生成多个动画帧,导致元素移动速度加快若有疑问或错误,请留言,谢谢 [toc] 编写涉及:css, html, js 在线演示codepen html代码 move start move css代码 .roll-box { position: relative; width: 600px; he...
摘要:背景最近开发公司的公众号,做了一个点击滚动到顶部的功能。但是作为一个攻城狮,怎么可能对自己要求这么低,所以我给自己加了个需求,实现平滑滚动页面到顶部的功能。使用我们都知道,通过传入文档中的,轴坐标来实现滚动到页面某个位置的功能。 背景 最近开发公司的公众号H5,做了一个点击icon滚动到顶部的功能。实现功能比较简单,直接调用window.scrollTo(0, 0),一行代码完成。但是...
摘要:背景最近开发公司的公众号,做了一个点击滚动到顶部的功能。但是作为一个攻城狮,怎么可能对自己要求这么低,所以我给自己加了个需求,实现平滑滚动页面到顶部的功能。使用我们都知道,通过传入文档中的,轴坐标来实现滚动到页面某个位置的功能。 背景 最近开发公司的公众号H5,做了一个点击icon滚动到顶部的功能。实现功能比较简单,直接调用window.scrollTo(0, 0),一行代码完成。但是...
摘要:现在又多了一种实现动画的方案,那就是还在草案当中的方法。这个方法就是传递给的回调函数。为回调函数一个简单的例子模拟一个进度条动画,初始宽度为在函数中将进度加然后再更新到宽度上,在进度达到之前,一直重复这一过程。 HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition...
阅读 3528·2021-11-24 09:38
阅读 3069·2021-11-15 11:37
阅读 756·2021-11-12 10:36
阅读 3496·2021-10-21 09:38
阅读 3203·2021-09-28 09:36
阅读 2385·2021-09-22 16:01
阅读 4825·2021-09-22 15:09
阅读 1187·2019-08-30 15:55