CSS：当图像1应该停留在原位时，图像组会移动到原位

时间：2014-11-28 06:48:32

标签： javascript html css animation css-transitions

我正在构建一个CSS灯箱库。我希望使用CSS过渡动画来完成部分操作。我试图做的是这样的：当你将鼠标悬停在基本图像上时，它会用一个＆＃34;脉冲＆＃34;让你知道你可以与它互动。当你点击它时，它会旋转，缩放并向观察者逐渐淡出，好像它会变成将在应该出现的灯箱中淡入的信息块。出现的盒子不仅仅是一个图像。它是带有图像的文本范围。然后当您单击（X）关闭按钮或单击页面上的任何位置时，灯箱会突然消失而不会淡出，所有原始图像都会重新到位。

实际发生的事情是你点击基本图像，它会像它应该旋转，缩放和淡化，但在背景中，其右边的其他图像滑到取而代之。然后当你点击灯箱时，一切都恢复原状。我不希望其他图像移动并填充第一个图像的位置。如何防止一切变化，以便当你点击image1并使其动画时，其他图像保持不变？这样，如果你点击图像2，图像3,4和5等不会滑过，或等等。

我正在使用一些Javascript来实现我的点击动画，这是我从另一个已经回答的Stack Overflow问题中借鉴/学习的。如果您能找到更好的方法来实现我想要的，请帮助并添加它。

作为一个附带问题，我如何让灯箱出现，如果你点击（X）关闭按钮或外面文本框，它会关闭灯箱，但如果你点击在文本框内，没有任何反应，灯箱会保留在原处？通过这种方式，人们可以点击并突出显示，以便在文本框内复制文本（如果需要）。

我似乎无法通过代码片段重现任何点击动画，因此您只能看到实际发生的事情，这里是我个人网络帐户中原始测试代码的链接。可以看到实际的点击动画以及出了什么问题：http://www.cafenocturne.com/testpage/biogallery/

这是我正在使用的代码的片段。

＆＃13;
＆＃13; 
$(window).load(function() {
  $(".ClickAnim").click(function() {
    $(this).addClass("rotOutZm");
    setInterval(function() {
      $(".ClickAnim").removeClass("rotOutZm");
    }, 2000);

  });

});
＆＃13; 
/* Just some base styles not needed for example to function */

*,
html {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
html,
body {
  height: 100%;
}
body,
form,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
}
body {
  background-color: #606061;
  color: WHITE;
  overflow: hidden;
}
img {
  border: none;
}
p {
  font-size: 12px;
  margin: 0 0 1em 0;
}
h2 {
  padding: 10px 0 0 20px;
}
.clear + h2 {
  padding: 0 0 0 20px;
}
.clear {
  height: 0 !important;
  line-height: 0 !important;
  clear: both !important;
  font-size: 1px !important;
  margin: 0;
  padding: 0;
  float: none !important;
}
/* animations */

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*rotateOut+Zoom */

@keyframes rotOutZm {
  100% {
    margin: -50px;
    /* image is 100x100px size so... */
    -webkit-transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    opacity: 0;
  }
}
@-webkit-keyframes rotOutZm {
  100% {
    margin: -50px;
    /* image is 100x100px size so... */
    -webkit-transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    opacity: 0;
  }
}
.rotOutZm {
  -webkit-transform-origin: center;
  -webkit-animation: rotOutZm forwards 1.8s;
  transform-origin: center;
  animation: rotOutZm forwards 1.8s;
}
/* pulse */

@-webkit-keyframes pulse1 {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse1 {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
/* fadeIn */

@-webkit-keyframes fadeIn1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn1 {
  -webkit-animation-name: fadeIn1;
  animation-name: fadeIn1;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
/* Bio styles */

ul {
  padding: 20px 0 20px 20px;
  float: left;
}
ul li {
  display: inline-block;
  float: left;
  list-style: none;
  margin: 0 10px 0 0;
}
.pulse1:hover {
  -webkit-animation: pulse1 0.8s;
  /* Safari 4+ */
  -moz-animation: pulse1 0.8s;
  /* Fx 5+ */
  -o-animation: pulse1 0.8s;
  /* Opera 12+ */
  animation: pulse1 0.8s;
  /* IE 10+, Fx 29+ */
}
ul li img,
ul li label {
  display: block;
  cursor: pointer;
}
ul li input {
  display: none;
}
ul li input:checked + .overlay {
  display: table;
}
.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 999;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
}
.overlay label {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.overlay img {
  display: inline;
  border: none;
  padding: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: WHITE;
}
.overlay label > img,
.content01 {
  border: 1px solid GRAY80;
  -moz-box-shadow: 5px 5px 10px BLACK;
  -webkit-box-shadow: 5px 5px 10px BLACK;
  box-shadow: 5px 5px 10px BLACK;
}
.content01 {
  display: block;
  width: 460px;
  padding: 20px;
  background: WHITE;
  color: BLACK;
  margin: 0 auto;
  text-align: left;
  cursor: auto;
  position: relative;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.content01 .inner_content {
  display: block;
  height: 500px;
  overflow-y: auto;
}
.content01 .inner_content span {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
}
.overlay .inner_content {
  height: 265px;
}
.content01 img:first-child {
  float: left;
  display: block;
  margin: 0 10px 0 0;
}
.content01 img {
  float: right;
  margin: 0 10px;
  padding: 0;
}
input[id^='bio'] {
  cursor: pointer;
  height: 265px;
}
.content02 {
  width: 820px;
  padding: 0;
}
#close {
  display: none;
}
.closebutton {
  background: #606061;
  color: #FFFFFF;
  cursor: pointer;
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -12px;
  width: 24px;
  border: 2px solid;
  border-color: #c18c8b #c05a58 #cc514e #a67776;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
  -moz-box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
  -webkit-box-shadow: 0 10px 16px rgba(241, 75, 67, 0.5), inset 0 -8px 12px 0 #ff6b67, inset 0 -8px 0 8px #ce4542, inset 0 -35px 15px -10px #f0bfbe;
}
.closebutton:hover {
  background: #f43530;
  text-shadow: 1px 1px 1px GRAY80;
}
＆＃13; 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<body>

  <h2>Static Content</h2>

  <ul>
    <li>
      <label class="animated pulse1" for="bio">
        <img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" class="ClickAnim animated" title="Hideto" />
      </label>
      <input type="radio" id="bio" name="Staff" />
      <div class="overlay animated fadeIn1">
        <label for="close">	<span class="content01">
						<strong class="closebutton" title="Close bio">X</strong>
						<span class="inner_content">
                            <img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" />
							<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span>
          </span>
          </span>
        </label>
      </div>
    </li>
    <li>
      <label class="animated pulse1" for="bio2">
        <img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" class="ClickAnim animated" title="Kieran" />
      </label>
      <input type="radio" id="bio2" name="Staff" />
      <div class="overlay animated fadeIn1">
        <label for="close">	<span class="content01">
						<strong class="closebutton" title="Close bio">X</strong>
						<span class="inner_content">
							<img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" />
							<span>OTHER Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque nisl, viverra at vestibulum vitae, luctus sed felis. Donec augue nibh, laoreet sed luctus id, facilisis a risus. Phasellus felis ligula, rhoncus non rutrum a, egestas vel nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis interdum purus. Phasellus id purus nisl. Praesent vulputate cursus nulla, eget egestas lorem vestibulum ut. Donec non pellentesque orci. Praesent faucibus dui scelerisque ligula euismod non hendrerit arcu placerat. Aliquam pharetra mollis augue quis tincidunt. Aliquam non tincidunt dolor. Fusce eleifend feugiat tortor nec sollicitudin. Ut non congue magna. Ut sit amet lacus lectus, sit amet dictum arcu. Cras consequat felis sit amet purus aliquet vel pretium justo fringilla. Maecenas vitae felis et metus lobortis ultrices vel eget odio. Sed molestie augue ac mauris ultrices eu euismod tortor ullamcorper. Morbi tincidunt dui a erat porttitor adipiscing. Integer eu dolor est, a dictum mi. </span>
          </span>
          </span>
        </label>
      </div>
    </li>
  </ul>
  <div class="clear">&nbsp;</div>
  <input type="radio" id="close" name="Staff" />
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

我已经涉足了你的链接。如果您在包裹图像的位置放置宽度和高度（图像的宽度和高度相同），它将保留空间，而不是移动下一个图像。

ul li label{
    width: 100px;
    height: 102px;
}
相关问题
最新问题