ホームページ >ウェブフロントエンド >htmlチュートリアル >JSモーション学習メモ 任意の値のモーションフレーム(高さ/幅、背景色、文字内容、透明度など)_html/css_WEB-ITnose
JSモーション学習メモ 任意の値のモーションフレーム(高さ/幅、背景色、文字内容、透明度など)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:18:371127ブラウズ
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>任意值的运动框架</title> <style> div { float: left; width: 200px; height: 200px; margin: 20px; background-color: yellow; border: 1px solid black; font-size: 14px; filter: alpha(opacity=30); /*IE*/ opacity: 0.3; /*火狐,chrome*/ } </style> <script> window.onload = function () {//Div变高 var oDiv1 = document.getElementById('div1'); oDiv1.onmouseover = function () { startMove(this, 'height', 400); }; oDiv1.onmouseout = function () { startMove(this, 'height', 200); };//Div变宽 var oDiv2 = document.getElementById('div2'); oDiv2.onmouseover = function () { startMove(this, 'width', 400); }; oDiv2.onmouseout = function () { startMove(this, 'width', 200); };//改变文字大小 var oDiv3 = document.getElementById('div3'); oDiv3.onmouseover = function () { startMove(this, 'fontSize', 30); }; oDiv3.onmouseout = function () { startMove(this, 'fontSize', 14); };//修改透明度 var oDiv4 = document.getElementById('div4'); oDiv4.onmouseover = function () { startMove(this, 'opacity', 100); }; oDiv4.onmouseout = function () { startMove(this, 'opacity', 30); }; }; //属性值的获取函数 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } }//运动框架 var timer = null; function startMove(obj, attr, iTarget) { //obj代表对象,attr代表目标属性,iTarget代表设定的属性目标值 clearInterval(obj.timer); //每次执行函数之前清除定时器,保证每次只有一个定时器在工作 obj.timer = setInterval(function () { var cur = 0; if (attr == 'opacity') { //透明度属性的获取 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //Math.round针对IE7出现小数的问题 } else { cur = parseInt(getStyle(obj, attr)); //非透明度的属性值获取 } var speed = (iTarget - cur) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //向上取整（速度为正值）和向下取整（速度为负值） if (cur == iTarget) { clearInterval(obj.timer); //达到目标值时清除定时器 } else { if (attr == 'opacity') { obj.style.filter = 'alpha(opacity=' + (cur + speed) + ')'; //IE浏览器 obj.style.opacity = (cur + speed) / 100; //火狐,chrome } else { obj.style[attr] = cur + speed + 'px'; //非透明度属性值 } } }, 30); } </script></head><body><div id="div1">变高</div><div id="div2">变宽</div><div id="div3">I Love JavaScript!</div><div id="div4">修改透明度</div></body></html>
JSモーションフレームワークについての注意点は以下のとおりです。
1. 透明属性値と非透明属性値の取得と割り当ては個別に設定する必要があります。一般的な属性は px であり、透明度には単位がありません。
2. IE ブラウザーでは互換性の問題があります。 Firefox と chrome: opacity = 0.3;を取得する場合は、parseInt の代わりに parseFloat メソッドを使用する必要があります。そのため、IE7 では、parseFloat()*100 によって取得される値は無効になります。非整数であり、互換性のために四捨五入に Math.round を使用する必要があります。
4. 結果の値は正または負の小数になる可能性があり、正の場合は切り上げる必要があります。マイナスの場合は切り捨てる必要があります。この操作を行わないと目標値に到達しません。 varspeed = (iTarget - cur) の値の場合、最小計算単位は 1px です。 ) / 6 が 0.5 未満の場合は無視されます。詳しくは、speed=0.4 と 0.5 の場合、ボタンをクリックするとテキスト ボックスの値が変化します。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width:100px; height:50px; background-color: yellow; } </style> <script> window.onload = function () { var oDiv = document.getElementById('div1'); var oBtn = document.getElementById('btn1'); oBtn.onclick = function () { var speed = 0.5;// var speed = 0.4; oDiv.style.width = oDiv.offsetWidth + speed + 'px'; document.getElementById('text1').value = oDiv.offsetWidth; }; } </script></head><body><div id="div1"></div><input type="button" id="btn1" value="按钮"><input type="text" id="text1"></body></html>
5. タイマーについて: モーション フレーム内の各タイマーが実行される前に、一度に 1 つのタイマーだけが実行されるようにすべてのタイマーをクリアする必要があります。そうしないと、複数のタイマーが同時に動作すると問題が発生します。 . バグ、実行速度がますます速くなります。
6. 同じ冗長なコードが出現する場合は、パラメーターを適切に導入してコードを簡素化できます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。