点击照片时缩放

Question

在http://themes.getbootstrap.com/products/application上，我可以点击照片缩放/放大照片。

如何获得此功能？我知道这个主题是要买的，但我不想为这个功能购买它。

我猜它很不错，但也许已经存在了获取此功能的库。

Answer 1

主题使用Zoom.js，您需要在图片中加入脚本并设置data-action="zoom“

Answer 2

你不需要javascript，你可以用CSS3过渡来做到这一点。

请参阅代码段

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.pic-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow:hidden;
}

figure {
  position: absolute;
  
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity:0;
  /*animation*/
  
  animation: slideShow 24s linear infinite 0s;
  -o-animation: slideShow 24s linear infinite 0s;
  -moz-animation: slideShow 24s linear infinite 0s;
  -webkit-animation: slideShow 24s linear infinite 0s;
}

.pic-1 {
  opacity: 1;
  z-index:-1;
  background: url(http://www.rachelgallen.com/images/daisies.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-2 {
  animation-delay: 6s;
  -o-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -webkit-animation-delay: 6s;
  background: url(http://www.hdwallpapersllc.com/wp-content/uploads/2015/08/Beautiful-Wallpapers.jpg) no-repeat center center;
  -webkit-background-size: cover;  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-3 {
  animation-delay: 12s;
  -o-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -webkit-animation-delay: 12s;
  background: url(http://www.hdwallpaperbackgrounds.org/photo/1362384578166_[hdwallpaperbackgrounds.org].jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-4 {
  animation-delay: 18s;
  -o-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -webkit-animation-delay: 18s;
  background: url(https://www.colourbox.com/preview/3210731-spring-beautiful-red-tulip-flowers-nature-background.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
/* keyframes*/

@keyframes slideShow {
  0% {
    opacity: 0;
    transform:scale(1);
    -ms-transform:scale(1);
  }
  4% {
    opacity: 1
  }
  24% {
    opacity: 1;    
  }
  28% {
    opacity: 0;
    transform:scale(1.1);
    -ms-transform:scale(1.1);
  }
  100% {
    opacity: 0;
    transform:scale(1);
    -ms-transform:scale(1);
  }    
 }

@-o-keyframes slideShow {
   0% {
    opacity: 0;
    -o-transform:scale(1);
  }
  4% {
    opacity: 1
  }
  24% {
    opacity: 1;    
  }
  28% {
    opacity: 0;
    -o-transform:scale(1.1);
  }
  100% {
    opacity: 0;
    -o-transform:scale(1);    
  }
}

@-moz-keyframes slideShow {
   0% {
    opacity: 0;
    -moz-transform:scale(1);
  }
  4% {
    opacity: 1
  }
  24% {
    opacity: 1;    
  }
  28% {
    opacity: 0;
    -moz-transform:scale(1.1);
  }
  100% {
    opacity: 0;
    -moz-transform:scale(1);    
  }
}

@-webkit-keyframes slideShow {
  0% {
    opacity: 0;
    -webkit-transform:scale(1);
  }
  4% {
    opacity: 1
  }
  24% {
    opacity: 1;    
  }
  28% {
    opacity: 0;
    -webkit-transform:scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform:scale(1);    
  }
}

＆＃13;

<div class="pic-wrapper">
  <figure class="pic-1"></figure>
  <figure class="pic-2"></figure>
  <figure class="pic-3"></figure>
  <figure class="pic-4"></figure>
</div>

＆＃13;

＆＃13;

＆＃13;