javascript示例顯示內容框

我試圖找到JavaScript代碼，當我翻轉圖像時，會使圖像出現在圖像下方並向下展開（很像是劇院中的電影屏幕會如何從天花板滾動到地上）。在那個框中，內容也會出現，我之前已經添加了，它描述了上面的圖片。已經存在的圖像下面我有一個div的內容...我也想這個div被推下來，因爲上面描述的框擴展了下來。javascript示例顯示內容框

有什麼建議嗎？

非常感謝您提前！

C *

忘了，我使用的代碼......所以這裏發生了什麼，是我有一個圖片，和它下面，一個小盒子，當我側翻小盒子它會改變顏色。所以，我想補充一點，當我在那個小盒子上滾動時，它不僅會改變顏色，而且新的垂直展開框會出現在它下面。我在* .js文件中處理了已存在的翻轉效果，但它很長，並且我不確定是否應該添加該文件（它是由Dreamweaver在創建翻轉圖像時創建的）。

$(".class_for_images").on("mouseenter mouseleave", function() { 
    var content = $(this).next(); 

    if (content.is(":visible")) { 
     content.slideUp(); 
    } else { 
     content.slideDown(); 
    } 
});

如果你想比這更多，或沒有關係：

<div class="images"> 

<figure class="images"> 
<img src="../images/Flower2.jpg" width="300" height="199" alt="Life"> 
</figure> 

<figcaption class="content"><a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../graphics/life2.jpg',4)"><img src="../graphics/life1.jpg" width="300" height="25" id="Image3" /></a> 
</figcaption> 

</div>

來源

2012-12-20 user1912669

我們幫不了你「定位「這段代碼，但我們可以幫助你解決已經寫好的任何問題。 –

http://mattgemmell.com/2008/12/08/what-have-you-tried/ – webnoob

你不會提供關於你當前設置的問題的很多信息，但假設你有你的HTML列出了這樣的事情：

<div> 
    <img id="tux" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" /> 
    <div id="tux_desc" class="imgDesc" style="display: none"> 
     <p>A cute penguin!</p> 
    </div> 
</div> 
<div> 
    <p>This text is part of the normal document flow</p> 
</div>

然後你可以用下面的的JavaScript（這使得使用jQuery的）：

$('#tux').hover(
    function() { 
     $('#tux_desc').slideDown(); 
    }, 
    function() { 
     $('#tux_desc').slideUp(); 
    });

你可以看到它在這裏工作：http://jsfiddle.net/wbAxm/1

來源

2012-12-20 10:15:48 FixMaker

您好！非常感謝你！ :)我回去並添加了我正在使用的代碼。看看你發佈的內容和我發佈的內容是否適合我的請求？或者它太雜亂，無法將其全部置於一種翻轉效果中......實質上，我試圖創建一個翻轉，事物的數量。 – user1912669

@ user1912669，它可能不是太亂，但Dreamweaver可能會這樣。我很久沒有使用過Dreamweaver，但從我的經驗來看，它似乎產生了很大的膨脹。你想要的東西可能可以通過一些結構良好的HTML和一些自定義JavaScript/jQuery代碼來實現。（但是，我不能完全從你的問題中告訴你想要改變顏色，以及你想要滑下什麼等等） – FixMaker

這樣的事情應該只要到這樣做的div來擴大在加價後的圖像是直接沒有工作，你需要發佈一些代碼，以便我們可以提供更詳細的答案...

來源

2012-12-20 10:14:45 danwellman

'toggleSlide'會更乾淨:) –

javascript示例顯示內容框

回答

相關問題