ホームページ > 記事 > ウェブフロントエンド > js等速運動をベースにしたサンプル解説
js等速運動をベースにしたサンプル解説
- 小云云オリジナル
- 2018-01-15 13:51:251293ブラウズ
この記事では主に均一モーション（サイドバー、フェードイン、フェードアウト）をベースにした解説例を紹介します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
JavaScript で要素 (p など) を動かすにはどうすればよいですか?
基本スタイルを設定し、必ず p を配置します (もちろん、マージンの変更を使用して要素の動きの効果を作成することもできます)。
<style>
p {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
}
</style>
基本構造:
<input type="button" value="动起来"/> <p id="box"></p>
このボタンをクリックするときは、p を配置する必要があります。それが動くとき、それは実際には p の左の値を変化させ続けることを意味し、それから p は最初に左を変化させ、それからそれを変化させ続けます
window.onload = function(){
var oBtn = document.querySelector( "input" ),
oBox = document.querySelector( '#box' );
oBtn.onclick = function(){
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}
}
そしてボタンをクリックするたびに。 、p の左の値は元の値に 10px を追加します。ここで、非インターライン スタイルを取得するメソッドを使用して、left プラス 10px の値を取得することもできます。これにより、効果も達成できます
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
window.onload = function () {
var oBtn = document.querySelector("input"),
oBox = document.querySelector('#box');
oBtn.onclick = function () {
oBox.style.left = parseInt( css( oBox, 'left' ) ) + 10 + 'px';
}
}
offsetLeft 非インターライン スタイル left の値を取得することとの違いは何ですか?
offsetLeft には px 単位がありませんが、left には px 単位があります
oBtn.onclick = function () {
// alert( css( oBox, 'left' ) ); //0px
alert( oBox.offsetLeft ); //0
}
ここで p をクリックして移動します。動き続けさせます。どうすればよいでしょうか? タイマーを追加します
oBtn.onclick = function () {
setInterval( function(){
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}, 1000 / 16 );
}
ボタンをクリックすると、p が左に動き続けます 停止させるにはどうすればよいですか?停止するには必ず条件が必要です。たとえば、500px に達したら停止するようにお願いします
var timer = null;
oBtn.onclick = function () {
timer = setInterval( function(){
if ( oBox.offsetLeft == 500 ) {
clearInterval( timer );
}else {
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}
}, 1000 / 16 );
}
ここで、ステップ サイズを 10 から 7 または 8 に変更すると、次のことがわかります。止められないのはなぜですか？ 500pxの判定条件がスキップされるので
0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. 497から504までは500pxスキップされるのでpやめられない場合はどうすればいいですか？判定条件を変更するだけです。
oBtn.onclick = function () {
timer = setInterval( function(){
if ( oBox.offsetLeft >= 500 ) {
oBox.style.left = 500 + 'px';
clearInterval( timer );
}else {
oBox.style.left = oBox.offsetLeft + 7 + 'px';
}
}, 1000 / 16 );
}
条件を >=500 に変更してタイマーをクリアし、このコード oBox.style.left = 500 + 'px' を追加して強制的に 500px で停止します。そうしないと p は停止しません。 p が移動しているときにボタンをクリックし続けると、毎回 10 ピクセルが追加されるのではなく、別の問題が発生します。これは、ボタンをクリックするたびにタイマーがオンになり、ボタンをクリックするたびにタイマーがオンになるため、複数のタイマーが重畳され、速度も重畳されるためです。が加速し始めたら、10px の速度を維持する必要があります。これは、タイマーが重ならないようにすることを意味します。どうすればいいですか？
oBtn.onclick = function () {
clearInterval( timer );
timer = setInterval( function(){
if ( oBox.offsetLeft >= 500 ) {
oBox.style.left = 500 + 'px';
clearInterval( timer );
}else {
oBox.style.left = oBox.offsetLeft + 7 + 'px';
}
}, 1000 / 16 );
}
タイマーが常にオンになるように、ボタンをクリックするたびに前のタイマーをクリアするだけで済みます。この時点で、最も基本的な等速モーション構造が完成し、これを にカプセル化できます。 function
function animate(obj, target, speed) {
clearInterval(timer);
timer = setInterval(function () {
if (obj.offsetLeft == target) {
clearInterval(timer);
} else {
obj.style.left = obj.offsetLeft + speed + 'px';
}
}, 30);
}
この関数を用意したら、小さなアプリケーションを作ってみましょう。
http://www.jiathis.com/getcode
このウェブサイトを開くと、右側にサイドバー効果があることに気づくでしょう (シェアしてください)。この種の特殊効果はウェブサイトでは非常に一般的です
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>侧边栏 - by ghostwu</title>
<style>
#box {
width: 150px;
height: 300px;
background: red;
position: absolute;
left: -150px;
top: 50px;
}
#box p {
width: 28px;
height: 100px;
position: absolute;
right: -28px;
top: 100px;
background: green;
}
</style>
<script>
window.onload = function () {
var timer = null;
var oBox = document.getElementById("box");
oBox.onmouseover = function () {
animate(this, 0, 10);
}
oBox.onmouseout = function () {
animate(this, -150, -10);
}
function animate(obj, target, speed) {
clearInterval(timer);
timer = setInterval(function () {
if (obj.offsetLeft == target) {
clearInterval(timer);
} else {
obj.style.left = obj.offsetLeft + speed + 'px';
}
}, 30);
}
}
</script>
</head>
<body>
<p id="box">
<p>分享到</p>
</p>
</body>
</html>
また来てください フェードインとフェードアウト効果:
マウスを上に動かすと、透明度が 1 になります
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出 - by ghostwu</title>
<style>
img {
border: none;
opacity: 0.3;
filter: alpha(opacity:30);
}
</style>
<script>
window.onload = function () {
var timer = null;
var oImg = document.getElementById("img");
oImg.onmouseover = function(){
animate( this, 100, 10 );
}
oImg.onmouseout = function(){
animate( this, 30, -10 );
}
//alpha=30 --> 100
function animate(obj, target, speed) {
clearInterval(timer);
var cur = 0;
timer = setInterval(function () {
cur = css( obj, 'opacity') * 100;
if( cur == target ){
clearInterval( timer );
}else {
cur += speed;
obj.style.opacity = cur / 100;
obj.style.filter = "alpha(opacity:" + cur + ")";
}
}, 30);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</head>
<body>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>
関連する推奨事項:
HTML5 キャンバスを使用して均一性を実現する方法モーション
js を使用してステップ サイズを指定する 一方向の均一モーション
均一な motion_javascript スキルを達成するための JS コード例
以上がjs等速運動をベースにしたサンプル解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。