ホームページ > ウェブフロントエンド > jsチュートリアル > モーションフレームワークを作成するためのJavaScript実装コード_基礎知識

モーションフレームワークを作成するためのJavaScript実装コード_基礎知識

WBOY
リリース: 2016-05-16 17:34:12
オリジナル
1156 人が閲覧しました

カプセル化されたモーション フレームワーク Move(obj,attr,iTarget) は直接呼び出すことができます:

幅、境界線、fontSize、marginLeft、不透明度などの多くの一般的な属性値の可変速度変更を設定して、さまざまな興味深い効果を実現するために使用できます。

IEおよびFFと互換性があります。

コードをコピー コードは次のとおりです:

/********************
*
* IE-BUG:
* In IE, when setting the opacity attribute, the opacity attribute needs to be set in the element style before it can be read. to the opacity value.
*
* obj: element object. attr: attribute name surrounded by quotes. iTarget: attribute target value.
*
*****************/


function Move(obj,attr,iTarget){
clearInterval(obj.timer);//Close the previous timer to solve the problem of timer failure when calling multiple Move() on the same object at the same time Overlay problem. Use obj.timer to give each object that calls Move() its own timer to prevent multiple objects from using the same timer when calling Move() at the same time, causing related interference problems.
obj.timer=setInterval(function(){
var cur=0;//Create a variable to store the value of the attr attribute at each moment
if(attr=="opacity") {
                                                                                                                                                                          use using using using using opacity using FF. round (parseFloat(getStyle(obj,attr))*100); etc.) into an integer
          }
           var speed=(iTarget-cur)/10;//Create a decreasing speed speed variable to realize variable speed changes of attribute values
.
Speed=speed>0?Math.ceil(speed):Math.floor(speed);//Rounding to solve the problem that the browser ignores values ​​less than 1px and causes the end of the movement to be a few pixels short of the target value Itarget Question

                                                                                                                       ;//current The value cur plus the decreasing speed value speed

if(attr=="opacity"){

// Set the opacity attribute value

for IE and FF respectively obj.style.filter="alpha(opacity: " cur ")"; //for IE
                                                                                                                                       . Add a value to the specified attribute attr cur speed
                                                                                                                                                                                   The value of the attribute in . obj: element object. name: attribute name.
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];//for IE
}else{
return getComputedStyle(obj, false)[name];//for FF
}
}


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート