1

iOS デバイスの iPad と iPhone、および CSS 変換のハードウェア アクセラレーションを利用できる Webkit を使用する Android デバイスで Javascript カルーセルをスムーズに動作するように変換したいと考えています。

位置とサイズの設定を可能にするライブラリまたはコードのスニペットは既にありますか?

私はjquery.animate-enhancedを見つけましたが、これは近いかもしれませんが、アニメーションが必要であり、機能検出も行います.もっと簡単なことをしたいのですが、それよりもはるかに複雑に見えます.

このソリューションで対処する必要があると思われる複雑な問題がいくつかあります。

-コードを単純に再利用して、top/ leftCSS 属性または翻訳付きの CSS 変換 (およびそれらを変換するために必要な再計算) を使用する

-幅と高さを設定する代わりにスケール変換を使用する

次のようなセットアップ手順:

--webkit-transform-styleに設定preserve-3d

--webkit-transform-origin必要に応じて設定する (そして何をする?)

4

1 に答える 1

0

タグにZeptoって書いてあったけど、検討したけどダメだったみたい？Zepto はアニメーションに CSS3 を使用しています。

最初の推測として、このようなことを試してみます。jquery と zepto ではアニメーション API が異なるため、「animateLeft」メソッドの外で機能検出を行う必要があります。

多分このようなもの（疑似コード）：

isTouchy = Modernizr.touch

var slideRight = function() {
    if (isTouchy) {
        Zepto('#carosel').animate(...)
    } else {
        jQuery('#carosel').slideRight() //sorry, don't know the api
    }
}

http://zeptojs.com/#animate

http://modernizr.com/

于 2012-04-23T03:09:22.327 に答える