-1

I have the following gallery http://jsfiddle.net/GErnD/ I can flip the cards with there is not picture in them. But how can I get the card to flip when I put other elements, like pictures, in them?

I'm using jquery with sly and css3d.

HTML

<div class="wrap">
      <div class="scrollbar">
        <div class="handle" style="-webkit-transform: translateZ(0px) translateX(270px); width: 301px;">
          <div class="mousearea">
          </div>
        </div>
      </div>
      <div class="frame effects" id="effects" style="overflow: hidden;">
        <ul style="-webkit-transform: translateZ(0px) translateX(-694px); width: 3500px;" class="">
            <li>
              <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                  <div class="front">
                    me
                    <img alt="Thumb glo me" src="http://dummyimage.com/300x300/000/fff">
                  </div>
                  <div class="back">
                    <h2>yoyoyoyoyoyoyoyo</h2>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                  <div class="front">
                    view
                    <img alt="Thumb octopus wall art" src="http://dummyimage.com/300x300/000/fff">
                  </div>
                  <div class="back">
                    <h2>yoyoyoyoyoyoyoyo</h2>
                  </div>
                </div>
              </div>
            </li>
            <li class="active">
              <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                  <div class="front">
                    another
                    <img alt="Thumb karaoke 2013 002" src="http://dummyimage.com/300x300/000/fff">
                  </div>
                  <div class="back">
                    <h2>yoyoyoyoyoyoyoyo</h2>
                  </div>
                </div>
              </div>
            </li>
            <li class="">
              <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                  <div class="front">
                    error
                    <img src="">
                  </div>
                  <div class="back">
                    <h2>yoyoyoyoyoyoyoyo</h2>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                  <div class="front">
                    h
                    <img src="">
                  </div>
                  <div class="back">
                    <h2>yoyoyoyoyoyoyoyo</h2>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                  <div class="front">
                    hey
                    <img src="">
                  </div>
                  <div class="back">
                    <h2>yoyoyoyoyoyoyoyo</h2>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                  <div class="front">
                    this
                    <img src="">
                  </div>
                  <div class="back">
                    <h2>yoyoyoyoyoyoyoyo</h2>
                  </div>
                </div>
              </div>
            </li>
        </ul>
      </div>
      <div class="controls center">
        <button class="btn prev"><i class="icon-chevron-left"> prev</i></button>
        <button class="btn next">next <i class="icon-chevron-right"></i></button>
      </div>
    </div>

CSS

/* effects */
.effects {
  height: 200px;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  perspective: 800px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  overflow-y: show; }
  .effects ul {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d; }
    .effects ul li {
      position: relative;
      margin: 0 -20px;
      -webkit-transform: rotateY(60deg) scale(0.9);
      -moz-transform: rotateY(60deg) scale(0.9);
      -ms-transform: rotateY(60deg) scale(0.9);
      -o-transform: rotateY(60deg) scale(0.9);
      transform: rotateY(60deg) scale(0.9);
      -webkit-transition: -webkit-transform 600ms ease-out;
      transition: transform 600ms ease-out; }
    .effects ul li.active {
      z-index: 10;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1); }
    .effects ul li.active ~ li {
      -webkit-transform: rotateY(-60deg) scale(0.9);
      -moz-transform: rotateY(-60deg) scale(0.9);
      -ms-transform: rotateY(-60deg) scale(0.9);
      -o-transform: rotateY(-60deg) scale(0.9);
      transform: rotateY(-60deg) scale(0.9); }

.frame {
  height: 550px;
  overflow: hidden; }
  .frame ul {
    list-style: none;
    margin: 0px 0px;
    padding: 0;
    height: 100%; }
    .frame ul li {
      float: left;
      width: 500px;
      height: 100%;
      margin: 0px 0px;
      padding: 0px;
      background: #fff;
      color: #000;
      text-align: center;
      cursor: pointer;
      border: solid #3184e9 2px;
      border-radius: 20px; }
      .frame ul li img {
        padding: 5px 0px; }
    .frame ul li.active.flip {
      color: #000;
      background: #fff;
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg); }

/* scrollbar */
.scrollbar {
  margin: 5px 0px;
  padding: 0px 0px;
  height: 5px;
  background: #ccc;
  line-height: 0; }
  .scrollbar .handle {
    width: 100px;
    height: 100%;
    margin: 5px 0px;
    background: #292a33;
    cursor: pointer; }
  .scrollbar .mousearea {
    position: absolute;
    top: -9px;
    left: 0;
    width: 100%;
    height: 20px; }

Javascript

var $frame = $('#effects');
  var $wrap  = $frame.parent();

  // Call Sly on frame
  $frame.sly({
    horizontal: 1,
    itemNav: 'forceCentered',
    smart: 1,
    activateMiddle: 1,
    activateOn: 'click',
    mouseDragging: 1,
    touchDragging: 1,
    releaseSwing: 1,
    startAt: 3,
    scrollBar: $wrap.find('.scrollbar'),
    scrollBy: 1,
    speed: 300,
    elasticBounds: 1,
    easing: 'swing',
    dragHandle: 1,
    dynamicHandle: 1,
    clickBar: 1,
    keyboardNavBy: 'items',

    // Buttons
    prev: $wrap.find('.prev'),
    next: $wrap.find('.next')
  });

  $('.active').click(function() {
    document.querySelector('.active').classList.toggle("flip");
  });
  $('.active').children().click(function() {
    document.querySelector('.active').classList.toggle("flip");
  });
4

1 回答 1

1

this happens because you assigned the onClick handler only to the element with the class .active which is visible IN THAT MOMENT, at which the js parses performs the action. when your element looses the class .active, or another element gets the class .active, the onclick handler does not change, beause javascript does not look for these changes.

you should use $('.active').live('click', function... or use $('.frame.effects').on('click', '.active', function...

$.live(eventType, callback), opposing to $.click(callback) or $.on(eventType, callback), recognizes the changes to class names, as does $.on(eventType, selector, callback)

EDIT okay it seems, jQuery dropped the live function. but check out the updated jsFiddle to see how to work with $.on(eventType, selector, callback). also you may read the jQuery API doc for that

于 2013-10-04T20:29:08.860 回答