Question

我是Jquery的新手，我需要对此页面上的滑动内容的效果做一些事情：http://rocanov.com/

有没有一种简单的方法可以使用相应的CSS创建div，然后在点击链接时让它从左边用Jquery调用，如该网站上显示的那样？

这方面的快速教程非常棒。无法在谷歌上找到任何内容。我不知道如何具体描述它。

已检查回复的评论部分中的解决方案

Answer 1

以下是两个实时示例，位于 jsfiddle ：http://jsfiddle.net/paulalexandru/4KkFZ/和 codepen http://codepen.io/paulalexandru/pen/iKGJl/ ，我还发布了你需要的所有代码。

HTML CODE：

<figure class="rift">
  <img src="image1.jpg" alt="image 1">
  <figcaption class="caption">Caption 01</figcaption>
</figure>

<figure class="rift">
  <img src="image2.jpg" alt="image 2">
  <figcaption class="caption">Caption 02</figcaption>
</figure>

<figure class="rift">
  <img src="image3.jpg" alt="image 3">
  <figcaption class="caption">Caption 03</figcaption>
</figure>

<figure class="rift">
  <img src="image4.jpg" alt="image 4">
  <figcaption class="caption">Caption 04</figcaption>
</figure>

CSS代码

/* Base plugin styles */

.rift { 
  width: 300px; /* Define width */
  height: 200px; /* Define height */
  position: relative; 
  overflow: hidden;
  backface-visibility: hidden;
}

.rift img { 
  width: 100%; 
  height: auto; 
  opacity: 0;
}

.rift .caption { 
  position: absolute; 
  top: 50%;
  width: 100%;
  height: 60px; /* Define caption height */
  line-height: 60px; /* Define matched line-height */ 
  margin: -30px 0 0 0; /* Half caption height */
  text-align: center; 
  z-index: 0;
}

.rift span[class*="span"] {
  display: block;
  width: 100%;
  height: 50%;
  overflow: hidden;
  position: absolute;
  left: 0;
  z-index: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0); /* Acceleration FTW */
  -webkit-transition: -webkit-transform .25s;
  transition: transform .25s; /* Define anim. speed */
}

.rift span.top-span { top: 0; }
.rift span.btm-span { bottom: 0; }

.rift:hover span.top-span { 
  -webkit-transform: translate(0,-30px);
  transform: translate(0,-30px); /* Half caption height */
}

.rift:hover > span.btm-span { 
  -webkit-transform: translate(0,30px);
  transform: translate(0,30px); /* Half caption height */
}

/* Non-plugin styles */

body { 
  text-align: center;
  background: #CCC; 
}

.rift { 
  display: inline-block;
  cursor: pointer;
  margin: 20px 0 0 20px; 
}

.rift .caption { 
  color: #FFF; 
  background: #C00C00;
}

JAVASCRIPT CODE

/**
 * Rift v1.0.0
 * An itsy bitsy image-splitting jQuery plugin
 * 
 * Licensed under the MIT license.
 * Copyright 2013 Kyle Foster @hkfoster
 */
;(function ( $, window, document, undefined ) {

  $.fn.rift = function () {

    return this.each(function () {

      // Vurribles
      var element = $(this),
          elemImg = element.find('img'),
          imgSrc  = elemImg.attr('src');

      // We be chainin'  
      element
        .prepend('<span class="top-span"></span>')
        .append('<span class="btm-span"></span>')
        .find('span.top-span')
        .css('background', 'url(' + imgSrc + ') no-repeat center top')
        .css('background-size', '100%')
        .parent()
        .find('span.btm-span')
        .css('background', 'url(' + imgSrc + ') no-repeat center bottom')
        .css('background-size', '100%');
    });
  };
})( jQuery, window, document );

$('.rift').rift();

除此之外，您还需要加载 jquery 和 normalize.css 。

滑动覆盖/灯箱/模态div效果

1 个答案: