摘要:編寫涉及在線演示代碼代碼代碼必須先清除,否者多次點(diǎn)擊會生成多個動畫幀,導(dǎo)致元素移動速度加快若有疑問或錯誤,請留言,謝謝
[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() { // 必須先清除,否者多次點(diǎn)擊會生成多個動畫幀,導(dǎo)致元素移動速度加快 window.cancelAnimation(rafId) rafId = window.requestAniFrame(moveFn) }
若有疑問或錯誤,請留言,謝謝!Github blog issues
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/101261.html
摘要:本文將針對使用生態(tài)開發(fā)完成的網(wǎng)站,以版本為基礎(chǔ)兼容目標(biāo),實(shí)現(xiàn)全功能正常使用的全面兼容解決方案。這樣做的目的,是逐步減少全局性方法,使得語言逐步模塊化。此外,使用這個,一旦頁面不處于瀏覽器的當(dāng)前標(biāo)簽,就會自動停止刷新。 前言 背景情況 vue - 2.5.11 vue-cli 使用模板 webpack-simple http請求:axios Vue 官方對于 ie 瀏覽器版本兼容情...
摘要:編寫涉及在線演示代碼代碼代碼必須先清除,否者多次點(diǎn)擊會生成多個動畫幀,導(dǎo)致元素移動速度加快若有疑問或錯誤,請留言,謝謝 [toc] 編寫涉及:css, html, js 在線演示codepen html代碼 move start move css代碼 .roll-box { position: relative; width: 600px; he...
摘要:背景最近開發(fā)公司的公眾號,做了一個點(diǎn)擊滾動到頂部的功能。但是作為一個攻城獅,怎么可能對自己要求這么低,所以我給自己加了個需求,實(shí)現(xiàn)平滑滾動頁面到頂部的功能。使用我們都知道,通過傳入文檔中的,軸坐標(biāo)來實(shí)現(xiàn)滾動到頁面某個位置的功能。 背景 最近開發(fā)公司的公眾號H5,做了一個點(diǎn)擊icon滾動到頂部的功能。實(shí)現(xiàn)功能比較簡單,直接調(diào)用window.scrollTo(0, 0),一行代碼完成。但是...
摘要:背景最近開發(fā)公司的公眾號,做了一個點(diǎn)擊滾動到頂部的功能。但是作為一個攻城獅,怎么可能對自己要求這么低,所以我給自己加了個需求,實(shí)現(xiàn)平滑滾動頁面到頂部的功能。使用我們都知道,通過傳入文檔中的,軸坐標(biāo)來實(shí)現(xiàn)滾動到頁面某個位置的功能。 背景 最近開發(fā)公司的公眾號H5,做了一個點(diǎn)擊icon滾動到頂部的功能。實(shí)現(xiàn)功能比較簡單,直接調(diào)用window.scrollTo(0, 0),一行代碼完成。但是...
摘要:現(xiàn)在又多了一種實(shí)現(xiàn)動畫的方案,那就是還在草案當(dāng)中的方法。這個方法就是傳遞給的回調(diào)函數(shù)。為回調(diào)函數(shù)一個簡單的例子模擬一個進(jìn)度條動畫,初始寬度為在函數(shù)中將進(jìn)度加然后再更新到寬度上,在進(jìn)度達(dá)到之前,一直重復(fù)這一過程。 HTML5/CSS3時代,我們要在web里做動畫選擇其實(shí)已經(jīng)很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition...
閱讀 3639·2021-11-24 09:38
閱讀 3142·2021-11-15 11:37
閱讀 781·2021-11-12 10:36
閱讀 3547·2021-10-21 09:38
閱讀 3220·2021-09-28 09:36
閱讀 2420·2021-09-22 16:01
閱讀 4986·2021-09-22 15:09
閱讀 1210·2019-08-30 15:55