今回は JavaScript と JS の詳細な演習をお届けします。 JavaScript を使用する際の注意事項は何ですか? JS の演習を次に示します。 JSモーションの基本
モーションフレームワーク
モーションを開始するときは、既存のタイマーを閉じます
モーションを分離して停止(if/else)
1.均一モーション
nbsp;HTML>
<meta>
<title>01-运动基础</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute; top:50px; left:0px;} </style>
<script>
//定时器
var timer=null; function startMove() { var oDiv=document.getElementById('div1'); //为了保证只有一个定时器工作,把之前的定时器全关了
clearInterval(timer);
timer=setInterval(function (){ var speed=1; if(oDiv.offsetLeft>=300)
{
clearInterval(timer);
} else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, 30);
} </script><input><div></div>ログイン後にコピー
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}</style><script>window.onload=function (){ var oDiv=document.getElementById('div1');
oDiv.onmouseover=function () {
startMove(0);
};
oDiv.onmouseout=function () {
startMove(-150);
};
};var timer=null;function startMove(iTarget){ var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){ //先初始化速度
var speed=0; //开始位置 > 终点位置:比方 起点:350 终点 50 要想到50这个位置,速度得为:-10;
//oDiv.offsetLeft : 起点位置
//iTarget终点位置
if(oDiv.offsetLeft>iTarget)
{
speed=-10;
} else
{
speed=10;
} //这个函数存在一个漏洞,如果oDiv.offsetLef 刚好t >=iTarget 定时器不会停止
if(oDiv.offsetLeft==iTarget)
{
clearInterval(timer);
} else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, 30);
}</script></head><body><div id="div1">
<span>分享到</span></div></body></html>ログイン後にコピー
3.フェードインそして出てきます
3. バッファの動き
は徐々に遅くなり、最終的には止まります
距離が遠いほど速度は大きくなります
速度は距離によって決まります
速度=(目標値-現在の値) / スケーリング係数
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>03-淡入淡出</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
opacity:0.3; //兼容chrome和ff
filtr:alpha(opacity:30);//兼容低版本的IE
} </style>
<script>
window.onload = function () { var oDiv = document.getElementsByTagName('div')[0];
oDiv.onmouseover = function () {
changeAlpha(100);
};
oDiv.onmouseout = function () {
changeAlpha(30);
}; var timer = null; var alpha = 30; function changeAlpha(isTarget) {
clearInterval(timer); var speed = 0;
timer = setInterval(function () { //注意这个速度判断要写在定时器里面
if (alpha < isTarget){
speed = 10;
}else {
speed = -10;
} if (alpha == isTarget){
clearInterval(timer);
}else {
alpha += speed;
oDiv.style.opacity = alpha/100;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
}
},30);
}
} </script></head><body><div></div></body></html>ログイン後にコピー
例: バッファリングメニュー
バグ: 速度の四捨五入、小数点以下への四捨五入は問題を引き起こします!!!
Math.ceil():向上取整 Math.ceil(3.41) 结果是4 ,Math.ceil(-9.8) 结果是 -9; Math.floor():向下取整 Math.floor(-0.9) 结果是 -1;
ログイン後にコピー
バッファリングの演習 1 (Chrome ブラウザでは互換性の問題があります)
ページのスクロールに追従するバッファリング サイドバー
潜在的な問題: ターゲット値が整数でない場合、ジッターが発生します。0.5 ピクセルの誤差が発生する可能性がありますが、これは無視できます。
右側のフローティングボックス
最初に基礎知識を理解しましょう
ブラウザのスクロールバーのスクロール距離を取得します
1. 固定レイヤーの位置は、ページをデザインするときによく使用され、一部の HTML オブジェクトの座標を取得する必要があります。ターゲット レイヤーの座標をより柔軟に設定するには、document.body.scrollTop などの属性を使用できますが、xhtml 標準 Web ページ、またはより単純に タグ。このタグを使用しないと、すべてが失われます。もちろん、xhtml ページの本文の座標を取得する方法はあります。documentElement を使用してドキュメントを置き換えます。 body は次のように記述できます
例:
ブラウザのスクロールバーのスクロール距離を取得します
var top = document.documentElement.scrollTop || JavaScript では || も良いことです。 if やその他の
条件判断
で使用されるだけでなく、変数の割り当てでも使用できます。したがって、上記の例は次の例と等価です。
例: var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
このように書くと互換性が良くなります。 逆に宣言がなかった場合、document.documentElement.scrollTopは0と表示されます。
<html><head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ padding: 0; margin: 0; } #div1 {width:100px; height:100px; background:red; position:absolute; left:0; top:50px;} #div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;} </style> <script> function startMove() { var oDiv=document.getElementById('div1'); setInterval(function (){ var speed=(300-oDiv.offsetLeft)/10; //缓冲运动一定要取整,否则会出事的!!!! //Math.ceil():向上取整 Math.ceil(3.41) 结果是4 ,Math.ceil(-9.8) 结果是 -9; //Math.floor():向下取整 Math.floor(-0.9) 结果是 -1; //speed=Math.floor(speed); //速度大于0,向上取整,速度小于0,向下取整; speed=speed>0?Math.ceil(speed):Math.floor(speed); //速度不能为小数:速度里面有小数,导致oDiv.style.left的值带有小数,而oDiv.style.left会自动取整,导致他把小数抹掉了,导致误差!!! //故把速度向上取整,来避免此误差 oDiv.style.left=oDiv.offsetLeft+speed+'px'; document.title=oDiv.offsetLeft+','+speed; }, 30); } </script></head><body><input type="button" value="开始运动" onclick="startMove()" /><div id="div1"></div><div id="div2"></div></body></html>ログイン後にコピー
一定速度で停止
//絶対値,
Math.abs()
例: (Math.abs(-6)) と (Math.abs(6)) は両方とも 6 になります、彼の意味 値を符号なし、すべて肯定的なものに変更するだけです。
document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度
<html><head><meta charset="utf-8"><title>右侧悬浮窗</title><style>#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}</style><script>window.onscroll=function (){ var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px'; startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);};var timer=null;function startMove(iTarget){ var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ var speed=(iTarget-oDiv.offsetTop)/4; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(oDiv.offsetTop==iTarget) { clearInterval(timer); } else { oDiv.style.top=oDiv.offsetTop+speed+'px'; } }, 30);}</script></head><body style="height:2000px;"><div id="div1"></div></body></html>ログイン後にコピー
この記事のケースを読んだ後は、この方法を習得したと思います。さらにエキサイティングな情報については、に関する他の関連記事に注目してください。 PHP中国語ウェブサイトです！
推奨読書:
JavaScriptの基本的な応用を深く理解する
JSで注意すべき8つの基礎知識
以上がJavaScriptとJSの動きを徹底的に分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
