那些遇到过的问题

CSS从角落动画中透露出来

GST*_*TAR 26 javascript css jquery css3 css-animations

我试图实现如下动画效果:

显示横幅时,应显示下一横幅的右下角.当您单击此角落时,它应隐藏当前横幅并显示下一个横幅.

我目前的加价如下:

<div class="banners">
    <div class="image active" style="background-color: red;">
        <div class="corner"></div>
    </div>

    <div class="image" style="background-color: blue;">
        <div class="corner"></div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS如下:注意我曾经clip-path创建角落:

.banners {
    width: 800px;
    height: 600px;
}

.image {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
}

.image.active {
     z-index: 1;
     clip-path: polygon(100% 0, 100% 65%, 60% 100%, 0 100%, 0 0);
}

.corner {
    width: 50%;
    height: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
}
Run Code Online (Sandbox Code Playgroud)

JS:

$(document).ready(function () {
    $('.corner').click(function() {
        $('.image.active').removeClass('active');
        $(this).parent().addClass('active');
    });
});
Run Code Online (Sandbox Code Playgroud)

这是以上所有代码的JSFiddle:https://jsfiddle.net/cqqxjjgu/

这个问题的一个直接问题是因为我z-index用来指定当前"活动"横幅应该具有优先权,当删除active类时它只是立即显示下一个横幅,所以理想情况下z-index只应在动画完成后更改.

有谁知道我怎么能实现这个目标？理想情况下,我需要一个跨浏览器解决方案(不太关于IE <10).

Ran*_*all 36

一个简单的例子,没有javascript实现这种效果:https:
//jsfiddle.net/freer4/j2159b1e/2/

html, body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
}
.banners {
  position:relative;
  background:#000;
  width: 100%;
  height: 100%;
  overflow:hidden;
}
.banners input{
  display:none;
}
.slide1{
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5T6nwVYWsbzLcLF-JNxnGXFFFwkZMBcCMbaqeTevuldkxHg0N);
}
.slide2{
  background-image:url(http://www.rd.com/wp-content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg);
}
.slide3{
  background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKr6YlGNsqgJzvgBBkq1648_HsuDizVn_ZXC6iQp9kjXFzLvs1BA);
}
.image {
  display:block;
  height:100%;
  width:100%;
  position: absolute;
  overflow:hidden;
  z-index:1;
  text-align:center;
  background-position:0 0;
  background-size:cover;
  transition:z-index 1s step-end;
  clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
  animation-duration: 2s;
  animation-name: clipout;
}
input:checked + .image{
  z-index:3;
  transition:z-index 1s step-end;
  clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0);
  animation-duration: 2.2s;
  animation-name: clipin;
  cursor:default;
}
.image:nth-child(2),
input:checked + * + * + .image{
  z-index:2;
  cursor:pointer;
}


.content{
  color:#FFF;
  display:inline-block;
  vertical-align:middle;
  font-family:arial;
  text-transform:uppercase;
  font-size:24px;
  opacity:0;
  transition:0s opacity 1s;
}
input:checked + .image .content{
  opacity:1;
  transition:0.8s opacity 0.8s;
}
.spanner{
  vertical-align:middle;
  width:0;
  height:100%;
  display:inline-block;
}

@keyframes clipout {
  from { clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); }
  50%  { clip-path: polygon(100% 0, 100% -100%, -100% 100%, 0 100%, 0 0); }
  51%   { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
  to   { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
}
@keyframes clipin{
  from { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
  50%  { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); }
  to   { clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); }  
}
Run Code Online (Sandbox Code Playgroud) 
<div class="banners">
  <input type="radio" id="slide1" name="slides" checked="checked" />
  <label class="image slide1" for="slide1">
    <div class="content">
      Slide 1
    </div>
    <div class="spanner"></div>
  </label>
  <input type="radio" id="slide2" name="slides"  />
  <label class="image slide2" for="slide2">
    <div class="content">
      Slide 2
    </div>
    <div class="spanner"></div>
  </label>
  <input type="radio" id="slide3" name="slides"  />
  <label class="image slide3" for="slide3">
    <div class="content">
      Slide 3
    </div>
    <div class="spanner"></div>
  </label>
</div>
Run Code Online (Sandbox Code Playgroud)

基本上,只需使用关键帧为剪辑路径设置动画.喜欢z-index和一些兄弟选择器.

  • 这看起来很棒!在Firefox中也能很好地工作.只有一个请求(抱歉是痛苦) - 是否可以使用`div`标签来做到这一点？我不认为`input`和`label`是用于此功能的语义最正确的标签.让我知道你的想法.再次感谢. (2认同)

Ran*_*all 9

这适用于任何具有转换支持的浏览器:https: //jsfiddle.net/freer4/cqqxjjgu/1/

基本上,制作一个非常大的封面幻灯片,与下一张幻灯片具有相同的背景颜色,并将其拉到当前幻灯片上.然后淡出以显示下一张幻灯片.

所以对html进行一点调整:

<div class="banners">
  <div class="image active" style="background-color: black;">
    <div class="content">
      Slide 1
    </div>
    <div class="spanner"></div>
    <div class="corner" style="background-color: cyan;"></div>      
  </div>

  <div class="image" style="background-color: cyan;">
    <div class="content">
      Slide 2
    </div>
    <div class="spanner"></div>
    <div class="corner" style="background-color: magenta;"></div>
  </div>

  <div class="image" style="background-color: magenta;">
    <div class="content">
      Slide 3
    </div>
    <div class="spanner"></div>
    <div class="corner" style="background-color: black;"></div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

如果没有更新,请更改jQuery以选择下一张幻灯片或第一张幻灯片:

$(document).ready(function () {
    $('.corner').click(function() {
        var $parent = $(this).parent();
        $parent.removeClass("active");
        if ($parent.next().length){
            $parent.next().addClass("active");
        } else {
            $parent.prevAll().last().addClass("active");
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

并设置一些复杂的过渡,你可以调整时间:

.image {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow:hidden;
    z-index:1;
    transition:z-index 2s step-end, 1s opacity 1s ease-in-out;
    text-align:center;
    opacity:0;
}
.image.active{
    opacity:1;
    z-index:2;
    transition:z-index 2s step-end, 0s opacity 0s;
}

.corner {
    width: 200%;
    height: 200%;
    position: absolute;
    top: -100%;
    left: -100%;
    clip-path: polygon(100% 0, 0 70%,  0 100%, 100% 100%, 100% 0, 100% 0);
    z-index:3;
    margin-left:150%;
    margin-top:150%;
    transition:2s top ease-in-out, 2s left ease-in-out, 0s margin 2s;
}
.image.active .corner{
  top:0;
  left:0;
  margin-top:0;
  margin-left:0;
  transition:0s top ease-in-out 1s, 0s left ease-in-out 1s, 2s margin ease-in-out 1s;
}
Run Code Online (Sandbox Code Playgroud)

旁白:这个例子是完全灵活的(不关心大小):

.banners {
    width: 100%;
    height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

或者使用图片:https://jsfiddle.net/freer4/ens7caaL/

Vad*_*kov 5

即使在IE/Edge中,这也适用于所有地方.它基于CSS transition并通过JavaScript替换CSS类.

我正在使用旋转矩形来裁剪图像.演示主要原理(包含大量硬编码,先前计算的值):

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;  
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 300px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  left: -86.6px;
  top: 50px;
  width: 359.8px;
  height: 240px;
  transform-origin: 0 0;
  transform: rotate(-30deg);
  border: 1px solid blue;
}
Run Code Online (Sandbox Code Playgroud) 
<div></div>
Run Code Online (Sandbox Code Playgroud)

主要演示(有很多硬编码值).为了更好地理解它的工作原理,您可以添加border到.slide-cropper:

$(document).ready(function() {
  $(".banners").on("click", ".slide-cropper.next .slide-content", function() {
    var $container = $(this).closest(".slide");
    
    $(".slide-cropper").removeClass("prev")
      .removeClass("current")
      .removeClass("next");

    $(this).closest(".slide-cropper").addClass("current");

    var $prevContainer;
    if ($container.prev().length) {
      $prevContainer = $container.prev();
    } else {
      $prevContainer = $container.siblings(":last");
    }
    $prevContainer.find(".slide-cropper").addClass("prev");

    var $nextContainer;
    if ($container.next().length) {
      $nextContainer = $container.next();
    } else {
      $nextContainer = $container.siblings(":first");
    }
    $nextContainer.find(".slide-cropper").addClass("next");
  });
});
Run Code Online (Sandbox Code Playgroud) 
*,
*:before,
*:after {
  box-sizing: border-box;
}

/* all body styles are just for demo */
/* just centering the slider */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.banners {
  width: 300px;
  height: 200px;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide .slide-cropper {
  position: absolute;
  left: -86.6px;
  top: 50px;
  width: 359.8px;
  height: 323.2px;
  transform-origin: 0 0;
  transform: rotate(-30deg);
  overflow: hidden;
  transition: height 2s linear;
}

.slide-content {
  position: absolute;
  background-size: 100% 100%;
  left: 100px;
  top: 0;
  width: 300px;
  height: 200px;
  transform: rotate(30deg);
  transform-origin: 0 0;
  z-index: 0;
  
  /* just styles for text */
  /* using flexbox to center text */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 3em;
}

.slide1 .slide-content {
  background-image: url("https://i.stack.imgur.com/tt875.jpg");
}

.slide2 .slide-content {
  background-image: url("https://i.stack.imgur.com/hzbmw.jpg");
}

.slide3 .slide-content {
  background-image: url("https://i.stack.imgur.com/4UxLW.jpg");
}

.slide-cropper.prev {
  height: 0;
  z-index: 3;
}

.slide-cropper.current {
  height: 240px;
  transition-delay: 2s;
  z-index: 2;
}

.slide-cropper.next {
  z-index: 1;
}

/* Fix for IE */
.slide-cropper.current {
  pointer-events: none;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="banners">
  <div class="slide slide1">
    <div class="slide-cropper current">
      <div class="slide-content">
        Slide 1
      </div>
    </div>
  </div>

  <div class="slide slide2">
    <div class="slide-cropper next">
      <div class="slide-content">
        Slide 2
      </div>
    </div>
  </div>

  <div class="slide slide3">
    <div class="slide-cropper">
      <div class="slide-content">
        Slide 3
      </div>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

为了理解它是如何工作的,我将所有计算都移到了CSS变量AKA CSS自定义属性中.它们可以在许多浏览器中使用,但不能与CSS calc功能结合使用.此示例仅在Chrome中完美运行,但有助于理解和修改此示例(只需将CSS变量替换为计算出的硬编码值).您也可以将此计算移动到CSS预处理器或JavaScript代码.

$(document).ready(function() {
  $(".banners").on("click", ".slide-cropper.next .slide-content", function() {
    var $container = $(this).closest(".slide");
    
    $(".slide-cropper").removeClass("prev")
      .removeClass("current")
      .removeClass("next");

    $(this).closest(".slide-cropper").addClass("current");

    var $prevContainer;
    if ($container.prev().length) {
      $prevContainer = $container.prev();
    } else {
      $prevContainer = $container.siblings(":last");
    }
    $prevContainer.find(".slide-cropper").addClass("prev");

    var $nextContainer;
    if ($container.next().length) {
      $nextContainer = $container.next();
    } else {
      $nextContainer = $container.siblings(":first");
    }
    $nextContainer.find(".slide-cropper").addClass("next");
  });
});
Run Code Online (Sandbox Code Playgroud) 
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  --width: 300px;
  --height: 200px;
  /* rotate for image cropping */
  --rotate-angle: 30deg;
  /* sin 30 degrees for image cropping */
  --sin-rotate-angle: 0.5;
  /* cos 30 degrees for image cropping */
  --cos-rotate-angle: 0.8660254037844386;
  /* clipper ratio for width, can be from 0 to 1 */
  --clipper-ratio: 0.45;
  --animation-timeout: 2s;
}

/* all body styles are just for demo */
/* just centering the slider */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.banners {
  width: var(--width);
  height: var(--height);
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide .slide-cropper {
  position: absolute;
  left: calc(-1 * var(--height) * var(--sin-rotate-angle) * var(--cos-rotate-angle));
  top: calc(var(--height) * var(--sin-rotate-angle) * var(--sin-rotate-angle));
  width: calc(var(--height) * var(--sin-rotate-angle) + var(--width) * var(--cos-rotate-angle));
  height: calc(var(--height) * var(--cos-rotate-angle) + var(--width) * var(--sin-rotate-angle));
  transform-origin: 0 0;
  transform: rotate(calc(-1 * var(--rotate-angle)));
  overflow: hidden;
  transition: height var(--animation-timeout) linear;
}

.slide-content {
  position: absolute;
  background-size: 100% 100%;
  left: calc(var(--height) / 2);
  width: var(--width);
  height: var(--height);
  transform: rotate(var(--rotate-angle));
  transform-origin: 0 0;
  z-index: 0;
  
  /* just styles for text */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 3em;
}

.slide1 .slide-content {
  background-image: url("https://i.stack.imgur.com/tt875.jpg");
}

.slide2 .slide-content {
  background-image: url("https://i.stack.imgur.com/hzbmw.jpg");
}

.slide3 .slide-content {
  background-image: url("https://i.stack.imgur.com/4UxLW.jpg");
}

.slide-cropper.prev {
  height: 0;
  z-index: 3;
}

.slide-cropper.current {
  height: calc(var(--height) * var(--cos-rotate-angle) + var(--clipper-ratio) * var(--width) * var(--sin-rotate-angle));
  transition-delay: var(--animation-timeout);
  z-index: 2;
}

.slide-cropper.next {
  z-index: 1;
}

/* Fix for IE */
.slide-cropper.current {
  pointer-events: none;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="banners">
  <div class="slide slide1">
    <div class="slide-cropper current">
      <div class="slide-content">
        Slide 1
      </div>
    </div>
  </div>

  <div class="slide slide2">
    <div class="slide-cropper next">
      <div class="slide-content">
        Slide 2
      </div>
    </div>
  </div>

  <div class="slide slide3">
    <div class="slide-cropper">
      <div class="slide-content">
        Slide 3
      </div>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

要将其更改为全屏,您需要设置--width: 100vw和--height: 100vh.(当然,你必须用硬编码的值替换CSS变量才能在所有浏览器中工作).演示:

$(document).ready(function() {
  $(".banners").on("click", ".slide-cropper.next .slide-content", function() {
    var $container = $(this).closest(".slide");
    
    $(".slide-cropper").removeClass("prev")
      .removeClass("current")
      .removeClass("next");

    $(this).closest(".slide-cropper").addClass("current");

    var $prevContainer;
    if ($container.prev().length) {
      $prevContainer = $container.prev();
    } else {
      $prevContainer = $container.siblings(":last");
    }
    $prevContainer.find(".slide-cropper").addClass("prev");

    var $nextContainer;
    if ($container.next().length) {
      $nextContainer = $container.next();
    } else {
      $nextContainer = $container.siblings(":first");
    }
    $nextContainer.find(".slide-cropper").addClass("next");
  });
});
Run Code Online (Sandbox Code Playgroud) 
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  --width: 100vw;
  --height: 100vh;
  /* rotate for image cropping */
  --rotate-angle: 30deg;
  /* sin 30 degrees for image cropping */
  --sin-rotate-angle: 0.5;
  /* cos 30 degrees for image cropping */
  --cos-rotate-angle: 0.8660254037844386;
  /* clipper ratio for width, can be from 0 to 1 */
  --clipper-ratio: 0.45;
  --animation-timeout: 2s;
}

/* all body styles are just for demo */
/* just centering the slider */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.banners {
  width: var(--width);
  height: var(--height);
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide .slide-cropper {
  position: absolute;
  left: calc(-1 * var(--height) * var(--sin-rotate-angle) * var(--cos-rotate-angle));
  top: calc(var(--height) * var(--sin-rotate-angle) * var(--sin-rotate-angle));
  width: calc(var(--height) * var(--sin-rotate-angle) + var(--width) * var(--cos-rotate-angle));
  height: calc(var(--height) * var(--cos-rotate-angle) + var(--width) * var(--sin-rotate-angle));
  transform-origin: 0 0;
  transform: rotate(calc(-1 * var(--rotate-angle)));
  overflow: hidden;
  transition: height var(--animation-timeout) linear;
}

.slide-content {
  position: absolute;
  background-size: 100% 100%;
  left: calc(var(--height) / 2);
  width: var(--width);
  height: var(--height);
  transform: rotate(var(--rotate-angle));
  transform-origin: 0 0;
  z-index: 0;
  
  /* just styles for text */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 3em;
}

.slide1 .slide-content {
  background-image: url("https://i.stack.imgur.com/tt875.jpg");
}

.slide2 .slide-content {
  background-image: url("https://i.stack.imgur.com/hzbmw.jpg");
}

.slide3 .slide-content {
  background-image: url("https://i.stack.imgur.com/4UxLW.jpg");
}

.slide-cropper.prev {
  height: 0;
  z-index: 3;
}

.slide-cropper.current {
  height: calc(var(--height) * var(--cos-rotate-angle) + var(--clipper-ratio) * var(--width) * var(--sin-rotate-angle));
  transition-delay: var(--animation-timeout);
  z-index: 2;
}

.slide-cropper.next {
  z-index: 1;
}

/* Fix for IE */
.slide-cropper.current {
  pointer-events: none;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="banners">
  <div class="slide slide1">
    <div class="slide-cropper current">
      <div class="slide-content">
        Slide 1
      </div>
    </div>
  </div>

  <div class="slide slide2">
    <div class="slide-cropper next">
      <div class="slide-content">
        Slide 2
      </div>
    </div>
  </div>

  <div class="slide slide3">
    <div class="slide-cropper">
      <div class="slide-content">
        Slide 3
      </div>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

还可以使用在Firefox中工作的CSS变量进行演示(Firefox对CSS变量的组合并不友好transform: rotate,所以我只transform: rotate用硬编码值替换):

$(document).ready(function() {
  $(".banners").on("click", ".slide-cropper.next .slide-content", function() {
    var $container = $(this).closest(".slide");
    
    $(".slide-cropper").removeClass("prev")
      .removeClass("current")
      .removeClass("next");

    $(this).closest(".slide-cropper").addClass("current");

    var $prevContainer;
    if ($container.prev().length) {
      $prevContainer = $container.prev();
    } else {
      $prevContainer = $container.siblings(":last");
    }
    $prevContainer.find(".slide-cropper").addClass("prev");

    var $nextContainer;
    if ($container.next().length) {
      $nextContainer = $container.next();
    } else {
      $nextContainer = $container.siblings(":first");
    }
    $nextContainer.find(".slide-cropper").addClass("next");
  });
});
Run Code Online (Sandbox Code Playgroud) 
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  --width: 100vw;
  --height: 100vh;
  /* sin 30 degrees for image cropping */
  --sin-rotate-angle: 0.5;
  /* cos 30 degrees for image cropping */
  --cos-rotate-angle: 0.8660254037844386;
  /* clipper ratio for width, can be from 0 to 1 */
  --clipper-ratio: 0.45;
  --animation-timeout: 2s;
}

/* all body styles are just for demo */
/* just centering the slider */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.banners {
  width: var(--width);
  height: var(--height);
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide .slide-cropper {
  position: absolute;
  left: calc(-1 * var(--height) * var(--sin-rotate-angle) * var(--cos-rotate-angle));
  top: calc(var(--height) * var(--sin-rotate-angle) * var(--sin-rotate-angle));
  width: calc(var(--height) * var(--sin-rotate-angle) + var(--width) * var(--cos-rotate-angle));
  height: calc(var(--height) * var(--cos-rotate-angle) + var(--width) * var(--sin-rotate-angle));
  transform-origin: 0 0;
  transform: rotate(-30deg);
  overflow: hidden;
  transition: height var(--animation-timeout) linear;
}

.slide-content {
  position: absolute;
  background-size: 100% 100%;
  left: calc(var(--height) / 2);
  width: var(--width);
  height: var(--height);
  transform: rotate(30deg);
  transform-origin: 0 0;
  z-index: 0;
  
  /* just styles for text */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 3em;
}

.slide1 .slide-content {
  background-image: url("https://i.stack.imgur.com/tt875.jpg");
}

.slide2 .slide-content {
  background-image: url("https://i.stack.imgur.com/hzbmw.jpg");
}

.slide3 .slide-content {
  background-image: url("https://i.stack.imgur.com/4UxLW.jpg");
}

.slide-cropper.prev {
  height: 0;
  z-index: 3;
}

.slide-cropper.current {
  height: calc(var(--height) * var(--cos-rotate-angle) + var(--clipper-ratio) * var(--width) * var(--sin-rotate-angle));
  transition-delay: var(--animation-timeout);
  z-index: 2;
}

.slide-cropper.next {
  z-index: 1;
}

/* Fix for IE */
.slide-cropper.current {
  pointer-events: none;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="banners">
  <div class="slide slide1">
    <div class="slide-cropper current">
      <div class="slide-content">
        Slide 1
      </div>
    </div>
  </div>

  <div class="slide slide2">
    <div class="slide-cropper next">
      <div class="slide-content">
        Slide 2
      </div>
    </div>
  </div>

  <div class="slide slide3">
    <div class="slide-cropper">
      <div class="slide-content">
        Slide 3
      </div>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

myf*_*ide 5

这是一个没有使用的答案clip-path,因为除了DOM元素之外的浏览器兼容性svg很低.

我现在看到Vadim与旋转容器有着相同的想法(在我完成之前没有检查过),但从我可以看出,我们的答案之间仍有足够的差异来证明我的解决方案是合理的:

$(document).ready(function() {
  $(".slider").on("click",".next",function() {
    if ($(this).prev().length) {$(this).prev().removeClass("curr");} else {$(this).siblings().last().removeClass("curr");} //deactivate current slide
    if ($(this).next().length) {$(this).next().addClass("next");} else {$(this).siblings().first().addClass("next");} //prepare slide that follows next slide
    $(this).removeClass("next").addClass("curr"); //activate next slide
  });
});
Run Code Online (Sandbox Code Playgroud) 
.slider, .slider .img {
  width: 55vw;
  height: calc(55vw / 16*9);
  background: #000 center/contain no-repeat;
}
.slider {position:relative; margin:0 auto; overflow:hidden;}

.slider .slide {
  position: absolute;
  z-index: 0;
  width: 250%;
  height: 0;
  transform: translateX(-50%) rotate(-20deg);
  transform-origin: 50% 0;
  transition:z-index 0s 0.7s, height 0.7s;
  overflow: hidden;
}
.slider .slide.next {z-index:1; height:155%; opacity:0.5; transition:z-index 0s 1.1s, height 0s 0.7s; cursor:pointer;}
.slider .slide.curr {z-index:2; height:135%; opacity:1.0; transition:z-index 0s 1.1s, height 0.4s 0.7s, opacity 0.7s;}

.slider .slide .img {margin-left:50%; transform:rotate(20deg); transform-origin:0 0;}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slider">
  <div class="slide curr"><div class="img" style="background-image:url(https://placeimg.com/640/480/animals);"></div></div>
  <div class="slide next"><div class="img" style="background-image:url(https://placeimg.com/640/480/people);"></div></div>
  <div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/nature);"></div></div>
  <div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/tech);"></div></div>
  <div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/arch);"></div></div>
</div>
Run Code Online (Sandbox Code Playgroud)
codepen:https: //codepen.io/anon/pen/JJQRvM jsfiddle:https:
//jsfiddle.net/tq2hw7b9/5/

  • 而不是clip-path我只是改变height幻灯片容器,transition用于动画效果.

IE疑难事

不幸的是,像往常一样,IE处理transform:rotate()与其他浏览器不同.视觉上旋转发生,但浏览器似乎仍然保留元素的原始空间,因此下一张幻灯片的暴露角落不可点击,因为当前幻灯片正在"覆盖"它.使用-ms-或-webkit-前缀并没有什么区别.

以下代码段可在IE中使用:

$(document).ready(function() {
  $(".slider .corner").on("click",function() {
  	var $next = $(this).siblings(".next");
    if ($next.prev().length) {$next.prev().removeClass("curr");} else {$next.siblings(".slide").last().removeClass("curr");} //deactivate current slide
    if ($next.next(".slide").length) {$next.next().addClass("next");} else {$next.siblings().first().addClass("next");} //prepare slide that follows next slide
    $next.removeClass("next").addClass("curr"); //activate next slide
  });
});
Run Code Online (Sandbox Code Playgroud) 
.slider, .slider .img {
  width: 55vw;
  height: calc(55vw / 16*9);
  background: #000 center/contain no-repeat;
}
.slider {position:relative; margin:0 auto; overflow:hidden;}

.slider .corner {
  position: absolute;
  z-index: 3;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 21%;
  transform: rotate(-20deg);
  transform-origin: 100% 0;
  cursor: pointer;
}

.slider .slide {
  position: absolute;
  z-index: 0;
  width: 250%;
  height: 0;
  transform: translateX(-50%) rotate(-20deg);
  transform-origin: 50% 0;
  transition:z-index 0s 0.7s, height 0.7s;
  overflow: hidden;
}
.slider .slide.next {z-index:1; height:155%; opacity:0.5; transition:z-index 0s 1.1s, height 0s 0.7s;}
.slider .slide.curr {z-index:2; height:135%; opacity:1.0; transition:z-index 0s 1.1s, height 0.4s 0.7s, opacity 0.7s;}

.slider .slide .img {margin-left:50%; transform:rotate(20deg); transform-origin:0 0;}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slider">
  <div class="slide curr"><div class="img" style="background-image:url(https://placeimg.com/640/480/animals);"></div></div>
  <div class="slide next"><div class="img" style="background-image:url(https://placeimg.com/640/480/people);"></div></div>
  <div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/nature);"></div></div>
  <div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/tech);"></div></div>
  <div class="slide"><div class="img" style="background-image:url(https://placeimg.com/640/480/arch);"></div></div>
  <div class="corner"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
codepen:https: //codepen.io/anon/pen/GEbrzQ jsfiddle:https:
//jsfiddle.net/8ggqndj1/

  • 我添加了一个<div class="corner">覆盖所有幻灯片的额外内容.
  • JS中的单击处理程序现在绑定到.corner此处,并且在处理程序的开头,对下一张幻灯片的引用存储在变量中,该变量在其余代码中使用.
  • 在CSS中还有一个新的规则.corner.

JS中的SLIDE-ARRAY

查看下面的代码片段,获取JS中的幻灯片列表(如果有人需要):

$(document).ready(function() {
  var slides = [
  	2, //index for next slide
    "https://placeimg.com/640/480/animals",
    "https://placeimg.com/640/480/people",
    "https://placeimg.com/640/480/nature",
    "https://placeimg.com/640/480/tech",
    "https://placeimg.com/640/480/arch"
  ];
  
//INITIALIZE SLIDESHOW--------------------
  $(".slider").css("background-image","url("+slides[2]+")"); //set next slide
  $(".slider .current .img").css("background-image","url("+slides[1]+")"); //set current slide, and set slide-height to slideshow-height
  
//SLIDESHOW CLICK-HANDLER--------------------
  $(".slider .current").on("click",function(e){e.stopPropagation();});
  $(".slider").on("click",function() {
  	$(this).children(".current").animate({height:0},700,function(){
    	$(this).children(".img").css("background-image","url("+slides[slides[0]]+")"); //set the current slide to the next slide
    	$(this).css("height","155%"); //cover entire slide
      if (slides[0]==slides.length-1) {slides[0]=1;} else {++slides[0];} //increase/loop index for next slide
      $(this).parent().css("background-image","url("+slides[slides[0]]+")"); //set the next slide to the next slide after that
      $(this).animate({height:"135%"},400); //reveal corner for next slide
    });
  });
});
Run Code Online (Sandbox Code Playgroud) 
.slider, .slider .img {
  width: 55vw;
  height: calc(55vw / 16*9);
  background: #000 center/contain no-repeat;
}
.slider {margin:0 auto; cursor:pointer; overflow:hidden;}

.slider .current {
  width: 250%;
  height: 135%;
  transform: translateX(-50%) rotate(-20deg);
  transform-origin: 50% 0;
  overflow: hidden;
  cursor: default;
}
.slider .current .img {margin-left:50%; transform:rotate(20deg); transform-origin:0 0;}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slider"><div class="current"><div class="img"></div></div></div>
Run Code Online (Sandbox Code Playgroud)
codepen:https: //codepen.io/anon/pen/EXBgew jsfiddle:https:
//jsfiddle.net/qghv9bnh/13/

  • 它可能对某些人有一些偏好,虽然我认为我的第一个解决方案更加清晰,更快,更灵活,可以添加额外的幻灯片(当然,当你使用像WordPress或Joomla这样的CMS时):
    1. 只有在您实际使用滑块时才会加载图像,因此用户可以为每个未单击的幻灯片节省带宽.
    2. HTML非常简洁,无论你有多少幻灯片都不会增长,所以你的HTML看起来更干净(但是如果你使用PHP来包含它们,它看起来就像干净,甚至更干净).

真的不能想到别的,就像我说的,我更喜欢第一个.但无论如何,它可能会派上用场.

归档时间：

查看次数：

2438 次

最近记录：

8 年 前
相关归档
关联数组对象的Javascript foreach循环 167
获取div的高度,没有在css中设置高度 87
在部分视图中包含JavaScript文件 69
jQuery:获取数据属性 64
删除按钮上的蓝色"选定"轮廓 44
响应式网站上的媒体查询的常见断点 42
删除CSS中的正文边距 24
为什么jQuery会重启事件两次？ 23
变换不在IOS上工作 21
表格中每行的边界半径 1
难疑归档
如何在ActionScript 3中将"Null"(真正的姓氏!)传递给SOAP Web服务？ 4603
在JavaScript中循环遍历数组 2940
如何在JavaScript中清空数组？ 2198
如何强制使用favicon刷新？ 1499
JavaScript发布请求,如表单提交 1465
无法绑定到'ngModel',因为它不是'input'的已知属性 1173
如何加入(合并)数据框(内部,外部,左侧,右侧)？ 1155
什么是(功能)反应式编程？ 1149
UTF-8一路走来 1146
git:撤消所有工作目录更改,包括新文件 1108