ホームページ > 記事 > ウェブフロントエンド > JS で複数オブジェクトの動きを実装する方法 (詳細なチュートリアル)
JS で複数オブジェクトの動きを実装する方法 (詳細なチュートリアル)
- 亚连オリジナル
- 2018-06-09 17:32:561373ブラウズ
この記事では、JS でマルチオブジェクトの動きを実現する方法を主に紹介し、JavaScript の原理と関連する操作スキルをサンプルの形式で詳しく説明します。この記事では、複数オブジェクトの動きを実現するための JS の例を分析しています。参考として皆さんと共有してください。詳細は次のとおりです:
基本的な手順1. getElementsByTagName を使用して、複数のオブジェクトによって移動される要素を取得します。次に、for ループが要素を走査し、イベントを追加します。
3. startMove 関数を定義します。現在の「移動」要素とターゲット値 target の 2 つのパラメーターが必要です
注:
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li'); // 第一步
for(var i=0;i<liTags.length;i++){ // 第二步
liTags[i].onmouseover = function () {
startMove(this,400);
}
liTags[i].onmouseout = function () {
startMove(this,200);
}
}
}
var timer = null;
function startMove(obj,iTarget) { // 第三步，2个参数
clearInterval(timer);
timer = setInterval(function () {
var iSpeed = (iTarget - obj.offsetWidth)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
if(obj.offsetWidth == iTarget){
clearInterval(timer);
}else{
obj.style.width = obj.offsetWidth+iSpeed+'px';
}
},30);
}
</script> 移動速度が比較的速い場合、一部の li が元の状態に戻れず、途中で止まっているように見えます これは、すべての li がタイマーを共有しているためです。 li が移動されると、startMove を呼び出してタイマーを開始します。マウスが li を削除すると、li を元の位置に戻すためにタイマーも開始する必要があります。li が半分に達すると、2 番目の li に移動し、タイマーが開始されます。この時点では最初のliが途中で止まってしまいました。
この問題を解決してください:
各 li に変更を制御するための独自のタイマーを持たせますliTags[i].timer = null;// 给每个li都添加一个timerその後、starMove で毎回それを使用します。タイマーはすべて現在の li です。独自のものなので、お互いに干渉しません。
ここでの前のタイマーは
完全なコードは次のとおりです:
<body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </body>いくつかのスタイルを追加します:
<style>
ul{list-style: none;}
ul li{
margin: 10px;
width: 200px;height: 50px;
background: lightblue;
}
</style>完全なjsコード<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li');
for(var i=0;i<liTags.length;i++){
liTags[i].timer = null;// 给每个li都添加一个timer
liTags[i].onmouseover = function () {
startMove(this,400);
}
liTags[i].onmouseout = function () {
startMove(this,200);
}
}
}
function startMove(obj,iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var iSpeed = (iTarget - obj.offsetWidth)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
if(obj.offsetWidth == iTarget){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+iSpeed+'px';
}
},30);
}
</script>obj.timer 次に例を見てみましょう: マルチオブジェクトの動き - 透明度の変更<script>
window.onload = function () {
var aImgs = document.getElementsByTagName('img');
for(var i=0;i<aImgs.length;i++){
aImgs[i].timer = null;
aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性
aImgs[i].onmouseover = function () {
startMove(this,30);
}
aImgs[i].onmouseout = function () {
startMove(this,100);
}
}
}
// var alpha = 100; 这里alpha在多物体运动里 不能公用
function startMove(obj,iTarget) {
clearInterval(obj.timer);
var iSpeed = (iTarget - obj.alpha)/10;
iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
obj.timer = setInterval(function(){
if(obj.alpha == iTarget){
clearInterval(obj.timer);
}else{
obj.alpha += iSpeed;
obj.style.opacity =obj.alpha/100;
obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
}
},30);
}
</script>上記は、私が皆さんのためにコンパイルしたものです。 , 今後の参考になれば幸いです。
関連記事:
Vue の検出シーケンスにオブジェクトの新しい属性を追加する方法は何ですか? jQuery で端から跳ね返るアニメーション効果を実現するにはどうすればよいですか?vue cli webpackでsassを使用する方法(詳細なチュートリアル)
jsダイナミクスでタグを作成し、属性メソッドを設定することによって(詳細なチュートリアル)
タグのサブ要素を追加して割り当てるメソッドをjQueryで実装する
よく使われるメッセージボックスをJSで実装するにはどうすればよいですか？
以上がJS で複数オブジェクトの動きを実装する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。