創建一個滑動內容在javascript中滑動內容

我目前正在學習JavaScript，我想滑動不同的div容器，同時在單擊滑動的容器時翻轉每個滑動div容器中的內容。創建一個滑動內容在javascript中滑動內容

我按照gliding content中顯示的示例創建了一個滑動div的內容，我還使用flipping content中提供的鏈接掃描了內容。我已經整合了他們兩個，但內容翻轉似乎不起作用，當我嘗試分開做它時，它工作正常。

對此不勝感激任何幫助，

感謝

**編輯* * * 我不知道如何使用的jsfiddle但一些如何這樣做，因爲我不知道如何在js小提琴中製作文件夾並放置我的文件，javascript和css沒有參考源文件，任何關於此的幫助都將不勝感激
基本思路如我的link,

來源

2012-09-28 Abida

顯示你的代碼，如果可能的展示在http://jsfiddle.net/ – prashanth

你寫你已經創建了一個例子確切的問題，可能是有益的張貼代碼。 – McGarnagle

關於jsFiddle。第一：將代碼擴展到問題演變的過程。如果代碼相關，則不需要CSS來解決問題。如果您使用框架（就像您一樣），您可以通過選擇它將其包含在左側菜單中。你使用的jQuery 1.3.2雖然很舊，但也可以使用更新的版本。如果需要，可以通過使用左側的「添加資源」並將它們鏈接到文檔中來添加所有其他JavaScript。你的代碼中的一個問題是你有三個獨立的jquery javascript文件調用。一個就夠了。 –

如果你需要做定製的東西，它可能是最好的學習CSS3，而不是試圖用插件。 MDN對CSS3 transitions（動畫）和transformations優秀的文章（倒裝，這是您要的3D旋轉）。

這裏有一些同時滑動/翻轉的演示（僅限於Webkit;您必須添加其他供應商前綴以使其適用於Firefox，IE等）。

Demo

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; 
}

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);

來源

2012-09-28 06:29:48 McGarnagle

創建一個滑動內容在javascript中滑動內容

回答

相關問題