Javascript 当我点击图像时，它会弹出'；它不在了，但我想模糊剩下的部分

对于我的学校项目，我正在制作一个包含互动运动鞋的网站

这个想法是，你可以挑选一只鞋，它会弹出，给你一些信息。在第二次点击时，它会回到原来的位置

为了给你一个想法，这里有一张网站的图片：

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

<div id="S-222" class="schoen"><img src="schoenenuitgeknipt\airmax97gr.png" ></div>

因此，弹出鞋子的代码如下所示：

<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>

var lastShoe=null，
最后鞋顶，最后鞋底，最后鞋宽，最后鞋重；
$（'.schoen'）。单击（函数（）{
var tar=$（这个）
if（lastShoe！=null）{
lastShoe.fadeIn（）.animate({
顶部：lastShoeTop，
左：lastShoeLeft，
高度：最后鞋宽，
宽度：最后一根鞋跟，
}, {
持续时间：“慢”，
队列：false
});
}
如果（！tar.is（lastShoe））{
lastShoe=焦油；
lastShoeTop=lastShoe.position（）.top；
lastShoeLeft=lastShoe.position（）.左；
lastShoeWidth=lastShoe.width（）；
lastShoeHeight=lastShoe.height（）；
tar.fadeIn（）.animate({
顶部：“10%”，
左：“30%”，
高度：'+=570px'，
宽度：'+=374px'，
}, {
持续时间：“慢”，
队列：false
});
}否则{
lastShoe=null；
}
});

问题是：

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

.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%;
}

---

如何模糊背景和所有其他鞋而不模糊单击的鞋

您可以按类名选择图像，并在其中循环，您可以对其应用css blur属性。

好的。。。让我们谈谈这里的变化

关于背景：我认为最好使用带有

位置：fixed

的

元素，而不是body-background属性

为什么?？正是因为当您想在其上添加效果时，您可以只处理元素**而不是包含所有内容的

。这样，就没有继承（默认情况下传递给子元素的属性），也不会对其他元素产生任何影响

关于使用

.animate（）

以及尝试“测量”

高度

、

宽度

和顶部/左侧

位置

。非常好。但是，当处理诸如

.animate（）

之类的延迟时，可能会造成混乱。这就是你发布的代码所发生的事情。这些图像并不总是获得其原始大小

如果可以使用CSS而不是jQuery

.animate（）

，那么就这样做吧！效率更高！绝对不需要存储“原始大小和位置。只需添加或删除一个类即可。哇，更简单一些。”

这是我为你编写的代码（还有你的家庭作业！），请花时间分析它，并确保在课堂上提交之前理解它

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

CSS:

jQuery:

JavaScript:

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

脚本：

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

.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%;
}

CSS:

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

.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%;
}

---

顺便说一句，没有足够的代码来正确地重新创建任何未明确定义的问题。因此，问题必须是最小的…但也必须是完整的。请查看并完成它，以反映您当前的行为。并对您的问题进行细化，使其更清晰。好的，我在代码笔中看到，鞋已经开始了现在我的鞋子在一行，但是当我点击一只鞋子的时候，我想剩下的都和背景一起模糊起来。我猜你有点模糊了…那么新的链接是什么呢？所以我不知道如何开始。我只想所有的都模糊+背景，除了点击的一只。当我再次点击时，模糊消失了。你可能可以这样做除了所选项目之外，在所有项目上应用模糊的方法。这更多的是一个评论而不是一个答案…请不要使用答案系统来评论。当你有50个代表时，你将有评论的特权。先生，你是我的英雄！这对我来说非常清楚，你已经学到了一些新的东西，我非常感谢！！！