2

我目前正在学习 javascript，当您单击正在滑动的容器时，我想滑动不同的 div 容器以及翻转每个滑动 div 容器内的内容。

我按照 滑动内容中显示的示例创建了一个内容滑动 div，并且我还有一个使用翻转内容中提供的链接翻转内容的示例。我已经集成了它们，但是内容的翻转似乎不起作用，当我尝试单独进行它们时，它工作正常。

任何有关这方面的帮助将不胜感激，

谢谢

**编辑* * * 我不知道如何使用jsfiddle，但有些人是如何做到这一点的，因为我不知道如何在js fiddle中创建文件夹并放置我的文件，javascript和css没有引用源文件，任何帮助关于这一点将不胜感激
基本思想如我的链接所示，

4

1 回答 1

1

如果你需要做自定义的东西，最好学习 CSS3 而不是尝试使用插件。MDN 有关于 CSS3过渡（动画）和转换（对于翻转，它是您想要的 3D 旋转）的优秀文章。

这是一个同时进行滑动/翻转的演示（仅限 Webkit；您必须添加其他供应商前缀才能使其在 Firefox、IE 等上工作）。

演示

HTML

<div class="container">
    <img src="http://lorempixel.com/400/200/food/1/" />
    <img class="slider" src="http://lorempixel.com/400/200/food/2/" />
</div>

<input value="flip" id="flip" type="button" />
<input value="slide" id="slide" type="button" />
<input value="both" id="both" type="button" />

CSS

.container { 
    width: 400px;
    height: 200px;
    overflow: hidden;
}
.slide {
  margin-top: -200px;  
}
.flip {
    -webkit-transform: rotate3d(0,1,0,90deg);
}
img {
    -webkit-transition: all 2s;
}
div {
    -webkit-transition: all 1s;
}

​JS 

var stop = false;
$(".container").each(function(i,e) {
    e.addEventListener('webkitTransitionEnd', function(e) {
    if (stop === false) {
        $(this).toggleClass("flip");    
        stop = true;
    }
    });
});

function flip(e) { 
    stop = false;
    $(".container").toggleClass("flip"); 
}
function slide() { 
    $(".slider").toggleClass("slide"); 
}
function both() {
    flip();
    slide();
}

$(document).on("click", ".container", function() {
    flip.call(this);
    slide(this);
});

$("#flip").click(flip);
$("#slide").click(slide);
$("#both").click(both);

​</p>

于 2012-09-28T06:29:48.920 回答