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);
  });
});

您定义的两个函数应该可以完美运行。

于 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 回答