1

シンプルなjsで簡単なアニメーションが必要です。そのためにはjqueryが多すぎると思います。ボタンを押してブロックの高さを増減する必要がありますが、これは Opera (.

例

function global_animate(element, property_to_map, duration, callback) {
   duration = duration || 1000;
   var delta = function (a) { return a; };
   var start = new Date().getTime();
   var property_from_map = {};
    var property_units_map = {};

    for (var property in property_to_map) {
        property_from_map[property] = window.getComputedStyle(element, null)[property] || element.currentStyle[property];
        property_units_map[property] = parseUnits(property_from_map[property]);
        property_from_map[property] = parseInt(property_from_map[property]);
        property_to_map[property] = parseInt(property_to_map[property]);
    }

    function parseUnits(a) {
        try {
        return a.match(/^\d+(\w{2}|%);?$/i)[1];
        } catch (e) {
        return "";
        }                   
    }

    setTimeout(function() {
    var now = (new Date().getTime()) - start;
    var progress = now / duration; 

    for (var property in property_to_map) {
        var result = (property_to_map[property] - property_from_map[property]) * delta(progress) + property_from_map[property];
        element.style[property] = result.toFixed(2) + property_units_map[property];
    }

    if (progress < 1)
        setTimeout(arguments.callee, 10);
    else
        if (typeof callback == 'function')
        callback();
    }, 10);
}
4

3 に答える 3

0

正規表現をから変更する必要があります

alert("23.2px".match(/^\d+(\w{2}|%);?$/i));​ // alert null

このようなものに

alert("23.2px".match(/^\d+\.*\d*(\w{2}|%);?$/i));​ // alert ["23.2px", "px"]
于 2012-11-06T09:19:50.107 に答える
0

問題は正規表現にあると思います: a.match(/^\d+(\w{2}|%);?$/i)[1];. 2回目に実行すると、ユニットが正しくキャッチされません。

単位を「px」にハードコーディングすると、（クロムで）機能します：http://jsfiddle.net/9DCA5/5/

そこからデバッグできますか？

于 2012-11-06T09:09:38.833 に答える
0

メソッド getComputedStyle() は IE ではサポートされていません。代わりに「currentStyle」プロパティを使用します。

于 2012-11-06T09:22:11.620 に答える