1

私はまだJavaScriptを初めて使用します（デザイナーは言うまでもなく、開発者ではありません）ので、ご容赦ください。

私は自分の CSS で乱数を使用したいと考えていましたが、これに適合する唯一の方法は、Javascript を組み込んで乱数を生成し、CSS を変更することでした。アイデアは、いくつかのスライドをアニメーション化して表示し、ホバーすると回転し、別のカテゴリをクリックするとアニメーション化することです。

ロード時とクリック時のボタンからの呼び出しの両方で、ドキュメントで機能させることができましたが、機能させる唯一の方法は、各インスタンスの完全なコードを書き出すことです。毎回同じなので、トランジションタイムなど何かを変える必要があるときは、複数の場所で何度もやり直さなければなりません。今のところ機能しますが、確かに理想的ではありません。

ここに完全なコードを入れるつもりはありませんが (とてつもなく長いので)、ここに例を示します。私はこれを持っています：

$(function() {
  $("#printLink").click(function() {

    $(".print").each(function() {
      $(this).css({
        "left":(Math.floor(Math.random()*10)-5),
        "bottom":(Math.floor(Math.random()*10)-5),
      });
    });

    $(".web, .motion").each(funtion() {
      $(this).css({
        "left":(Math.floor(Math.random()*200)-100) + '%',
        "bottom":(Math.floor(Math.random()*500)+500),
      });
    });

  });
});

さて、ボタン #printLink と、クラス .print、.web、および .motion を持つ個別のスライド グループがあります (以下のデモ リンクでは、モーション セクションにスライドはありません)。#printLink をクリックすると、.print スライドが表示され、.web および .motion スライドが画面外に移動します。私が言ったように、私はすでにこれをすべて機能させていますが、すべての CSS を何度も指定する必要があります。

私がしたいのは次のようなものです：

function moveIn(){
  $(this).css({
    "left":(Math.floor(Math.random()*10)-5),
    "bottom":(Math.floor(Math.random()*10)-5),
  });
}

function moveOut(){
  $(this).css({
    "left":(Math.floor(Math.random()*200)-100) + '%',
    "bottom":(Math.floor(Math.random()*500)+500),
  });
}
$(function() {
  $("#printLink").click(function() {
    $(".print").each(function() {
      moveIn();
    });
    $(".web, .motion").each(function() {
      moveOut();
    });
  });
});

このようにして、毎回同じ CSS 文字列を参照するだけで、コードが一致しない可能性を最小限に抑えることができます。

これは、私が話していることをよりよく理解するための参照リンクです。

4

2 に答える 2

0

また、何が問題になっていますか。

$(function() {
  $("#printLink").click(function() {
    $(".print").each(moveIn);
    $(".web, .motion").each(moveOut);
  });
});

定義した2つの関数は完全に機能するはずです。

于 2012-10-30T18:10:28.567 に答える
0

CSS3を採用したいが、乱数が必要ない場合は、CSS のいくつかのクラスでこれを処理できます...

.print, .web { 
    display: absolute;
    top: 500px; left: -1000px; 
    opacity: 0.0;
    -webkit-transition: all 0.5s ease-in-out; 
}
.printOn, .webOn { 
    top: 0px; left: 0px; 
    opacity: 1.0;
}

その後、リンクはこれらのクラスを切り替えるだけです...

$(function() {
    var $print = $('.print'), $web = $('.web');
    $("#printLink").click(function(e) {
        $print.addClass('printOn');
        $web.removeClass('webOn');
        e.preventDefault();
    });
    $("#webLink").click(function(e) {
        $web.addClass('webOn');
        $print.removeClass('printOn');
        e.preventDefault();
    });
});

注: この記事の執筆時点では、"transition" プロパティは十分にサポートされていません。しかし、それをサポートしていないブラウザーでも、アニメーションなしでリンクを表示したり隠したりする必要があります。

于 2012-10-30T18:43:10.043 に答える