Question

对于我的学校项目，我正在制作一个包含交互式sneakerwall的网站。

这个想法是你可以选择一只鞋子然后弹出并提供一些信息。第二次点击它会回到原来的位置。

在这里给你一个想法是网站的图片：Shoe-wall

因此，我的HTML中的所有鞋子都是不同的图像，如下所示：

body{
  background: url("picturesari/bgari.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  height: 98%;
}

对于我使用过的背景：

<script>
var lastShoe = null,
  lastShoeTop, lastShoeLeft, lastShoeWidth, lastShoeHeight;
$('.schoen').click(function() {
  var tar = $(this)
  if (lastShoe != null) {
    lastShoe.fadeIn().animate({
      top: lastShoeTop,
      left: lastShoeLeft,
      height: lastShoeWidth,
      width: lastShoeHeight,
    }, {
      duration: 'slow',
      queue: false
    });
  }
  if (!tar.is(lastShoe)) {
    lastShoe = tar;
    lastShoeTop = lastShoe.position().top;
    lastShoeLeft = lastShoe.position().left;
    lastShoeWidth = lastShoe.width();
    lastShoeHeight = lastShoe.height();
    tar.fadeIn().animate({
      top: "10%",
      left: "30%",
      height: '+=570px',
      width: '+=374px',
    }, {
      duration: 'slow',
      queue: false
    });
  } else {
    lastShoe = null;
  }
});
</script>

所以弹出鞋子的代码如下：

    FXMLLoader loader = new FXMLLoader();
    Parent root = loader.load(getClass().getResource("Window1.fxml").openStream());
    Controller controller = loader.getController();
    controller.setReferenceToController(controller);

问题是：

如何模糊背景和所有其他鞋子，而不会模糊点击的鞋子

Answer 1

好的......让我们谈谈这里所做的更改。

关于背景：我认为最好将<img>元素与position:fixed一起使用，而不是使用正文背景属性。

为什么呢？正是因为当你想在它上面添加一个效果时，你可以只处理元素**而不是包含所有内容的<body>。这样，就没有继承（默认情况下传递给子属性）对其他元素没有单一的影响。

关于您对.animate() 的使用以及您“衡量”height，width和左/右position的尝试。这非常好。但是当处理像.animate()这样的延迟时，它可能是一团糟。这就是您发布的代码所发生的事情。图像并不总是达到原始尺寸。

当您可以使用CSS而不是jQuery .animate()时，请执行此操作！效率更高！绝对没有必要存储“原始大小和位置。这只是添加或删除类的问题.Waay更简单。;”

以下是我为您制作的代码（以及您的作业！），请花时间进行分析，并确保在课堂上提交之前了解所有内容。

你可以问我一些问题......但首先，至少要阅读这些文件：

CSS： transition filter transform position z-index

jQuery： .addClass() .removeClass() .not() .on()

JavaScript： event.target

了解这些工具有助于更好地工作。

<强>脚本：

var lastShoe = null;

// On click anywhere but not on a shoe
$(document).on("click",function(e){
  if( !$(e.target).parent("div").is(".schoen") ){
    $(".back, .schoen").removeClass("blurred displayPos");
  }
});

// On click on a shoe
$(".schoen").click(function() {
  $(".back").addClass("blurred");
  $(".schoen").removeClass("blurred");
  $(".schoen").not($(this)).addClass("blurred");

  // if the click occured on a different shoe than previous.
  if( !($(this).is(lastShoe)) ){
    lastShoe = $(this);
    $(".schoen").removeClass("displayPos");
    $(this).addClass("displayPos");
  }
});

<强> CSS：

.back{
  position:fixed;
  z-index:-1;
  top:0;
  bottom:0;
  left:0;
  right:0;
  transition: all 1s;
}
.blurred{
  filter: blur(5px);
}
.displayPos{
  top:10% !important;
  left:30% !important;
  transform: scale(1.5);
}
.schoen{
  position:fixed;
  max-width:200px;
  transition: all 1s;
}
.schoen img{
  max-width:100%;
}

CodePen

Answer 2

您可以按类名选择图像并循环显示它们，您可以在其中应用css blure属性。

当我点击图像时，它弹出，但我想模糊其余部分

2 个答案: