資訊專欄INFORMATION COLUMN
摘要：編寫涉及在線演示代碼代碼代碼必須先清除，否者多次點擊會生成多個動畫幀，導(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() {
// 必須先清除，否者多次點擊會生成多個動畫幀，導(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/108862.html
摘要：本文將針對使用生態(tài)開發(fā)完成的網(wǎng)站，以版本為基礎(chǔ)兼容目標(biāo)，實現(xiàn)全功能正常使用的全面兼容解決方案。這樣做的目的，是逐步減少全局性方法，使得語言逐步模塊化。此外，使用這個，一旦頁面不處于瀏覽器的當(dāng)前標(biāo)簽，就會自動停止刷新。 前言 背景情況 vue - 2.5.11 vue-cli 使用模板 webpack-simple http請求：axios Vue 官方對于 ie 瀏覽器版本兼容情...
摘要：編寫涉及在線演示代碼代碼代碼必須先清除，否者多次點擊會生成多個動畫幀，導(dǎo)致元素移動速度加快若有疑問或錯誤，請留言，謝謝 [toc] 編寫涉及：css, html, js 在線演示codepen html代碼 move start move css代碼 .roll-box { position: relative; width: 600px; he...
摘要：背景最近開發(fā)公司的公眾號，做了一個點擊滾動到頂部的功能。但是作為一個攻城獅，怎么可能對自己要求這么低，所以我給自己加了個需求，實現(xiàn)平滑滾動頁面到頂部的功能。使用我們都知道，通過傳入文檔中的，軸坐標(biāo)來實現(xiàn)滾動到頁面某個位置的功能。 背景 最近開發(fā)公司的公眾號H5，做了一個點擊icon滾動到頂部的功能。實現(xiàn)功能比較簡單，直接調(diào)用window.scrollTo(0, 0)，一行代碼完成。但是...
摘要：背景最近開發(fā)公司的公眾號，做了一個點擊滾動到頂部的功能。但是作為一個攻城獅，怎么可能對自己要求這么低，所以我給自己加了個需求，實現(xiàn)平滑滾動頁面到頂部的功能。使用我們都知道，通過傳入文檔中的，軸坐標(biāo)來實現(xiàn)滾動到頁面某個位置的功能。 背景 最近開發(fā)公司的公眾號H5，做了一個點擊icon滾動到頂部的功能。實現(xiàn)功能比較簡單，直接調(diào)用window.scrollTo(0, 0)，一行代碼完成。但是...
摘要：現(xiàn)在又多了一種實現(xiàn)動畫的方案，那就是還在草案當(dāng)中的方法。這個方法就是傳遞給的回調(diào)函數(shù)。為回調(diào)函數(shù)一個簡單的例子模擬一個進度條動畫，初始寬度為在函數(shù)中將進度加然后再更新到寬度上，在進度達到之前，一直重復(fù)這一過程。 HTML5/CSS3時代，我們要在web里做動畫選擇其實已經(jīng)很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition...
閱讀 1432·2021-11-25 09:43
閱讀 2029·2021-07-26 23:38
閱讀 740·2019-08-30 15:53
閱讀 2280·2019-08-30 15:43
閱讀 1167·2019-08-29 18:40
閱讀 1970·2019-08-26 13:28
閱讀 1973·2019-08-23 18:20
閱讀 541·2019-08-23 15:07
