2

クリックすると div が移動し、バインドされている 2 番目のイベントに移動する必要があります。これで問題なく動作しますが、最初だけです。複数のクリックで何度も発生できる必要があります。

これを行う方法はのようですがtranslate、すべてCss上にあり、クリックが好きではありません. （私は試しましたが、うまくいきません）。

方法を説明したり、自分で助けてくれるサイトを教えてくれる人はいますか? ありがとう

編集：さて、これがスクリプトです...

$('li, .thumbs').on('click', function() {
        $("#myVid").css("-webkit-transform","translate(-2070px, 0px)");
                //click plays a video
//some stuff happens
$('#myVid').bind("playing", function() {
        $("#myVid").css("-webkit-transform","translate(0px, 0px)");

問題に実際に関連するのはそれだけです... **編集：それで、CSSに変更しました。addClassこれremoveClassが現在のスクリプトです

$('li, .thumbs').on('click', function() {
        $("#myVid").addClass('move');
//stuff happens
$('#myVid').bind("playing", function() {
        $("#myVid").removeClass('move');

そしてCSS

.move {
    -webkit-transform: translateX(2000px);
}

しかし、それが機能している間、それはたくさん点滅します

4

3 に答える 3

2

私はちょうどこのjsfiddleを解き放ちました...うまくいけばそれが役立つでしょう。

変更が必要な要素（または一連の変更全体をトリガーする親要素）にCSSクラスを追加するのが好きです。

この例では、「moved」クラスをdivに追加および削除するだけで、必要なスペースが調整されます。

http://jsfiddle.net/fvgaK/5/

[編集：ie互換にするために更新]

于 2012-05-17T05:35:41.340 に答える
2

CSS3を使えばできます。ただし、すべてのブラウザで動作するわけではありません。

ここで情報を活用できます。 http://www.w3.org/TR/css3-2d-transforms/

また、このようにすることもできます。

.rotate {
    -webkit-transform: rotate(30deg); /* safari and chrome */
    -moz-transform: rotate(30deg);/*firefox browsers */
    transform: rotate(30deg);/*other */
    -ms-transform:rotate(30deg); /* Internet Explorer 9 */
    -o-transform:rotate(30deg); /* Opera */
}

http://jsfiddle.net/jJdxc/

編集：

インターネットで検索しているときに、この JavaScript プラグインを見つけました。翻訳プロセスに非常に役立ちます。

http://fabricjs.com/

http://fabricjs.com/kitchensink/

于 2012-05-17T05:50:25.750 に答える