加載動態縮略圖和內容

您好我想加載div2中的每個菜單點擊div1中的縮略圖。本代碼縮略圖顯示在pageload.it shud只顯示菜單click.and當我點擊縮略圖時它顯示它應顯示div3.how中的差異顯示內容以動態加載每個使用差異內容點擊的縮略圖的div3（成語&文本）。檢查這個網址我的佈局，我刨enter link description here 加載動態縮略圖和內容

<head> 
    <title>Scroll Menu</title> 
    <script type="text/javascript" src="../js/jquery-1.3.1.min.js"></script> 
    <script type="text/javascript" src="../js/jquery.easing.1.3.js"></script> 
    <script type="text/javascript" src="../js/jquery.color.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $('#menu li').click(function() { 
    window.location = $(this).find('a').attr('href'); 
    }).mouseover(function(){ 
    $(this).find('a') 
    .animate({ paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 }) 
    .animate({ backgroundColor: colorOver }, { queue:false, duration:200 }); 
    }).mouseout(function() { 
    $(this).find('a') 
    .animate({ paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 }) 
    .animate({ backgroundColor: colorOut }, { queue:false, duration:200 }); 
    }); 
    $('#sidebar').mousemove(function(e) { 
    var s_top = parseInt($('#sidebar').offset().top);  
    var s_bottom = parseInt($('#sidebar').height() + s_top); 
    var mheight = parseInt($('#menu li').height() * $('#menu li').length); 
    $('#debugging_mouse_axis').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); 
    $('#debugging_status').html(Math.round(((s_top - e.pageY)/100) * mheight/2)); 
    var top_value = Math.round(((s_top - e.pageY) /100) * mheight/2); 
    $('#menu').animate({top: top_value}, { queue:false, duration:500}); 
    }); 
    }); 

    </script> 

    <style> 
    body { 
    padding:0; 
    margin:0 20px; 
    } 

    #sidebar { 
    height:400px; 
    overflow:hidden; 
    position:relative; 
    background-color:#fff; 
    } 

    #menu { 
    width:100%; 
    list-style:none; 
    padding:0; 
    margin:0; 
    top:0; 
    position:relative; 
    height:100%; 
    width:300px; 
    } 

    #menu li { 
    padding:10px 0; 
    text-align:right; 
    display:block; 
    cursor:hand; 
    cursor:pointer; 
    } 

    #menu li a { 
    background:url() repeat #1f1f1f; 

    color:#ddd; 
    font-family:helvetica, arial, verdana; 
    font-size:9px; 
    font-weight:900; 
    display:inline; 
    padding:20px 8px 5px 20px; 
    text-decoration:none; 
    } 

    #menu li span { 
    font-family:georgia, arial; 
    font-size:9px; 
    color:#464646; 
    } 


    </head> 
    <div id = "mainmenu"> 
    <ul><li><a href="#">MENU1</a></li><li><a href="#">MENU2</a></li> 
    </ul></div> 
    <div id="sidebar"> 
    <ul id="menu"> 
    <li><a href="#"><img src="img" alt="alt text" /></a></li> 
    <li><a href="#"><img src="" alt="alt text" /></a></li> 
    <li><a href="#"><img src="" alt="alt text" /></a></li> 
    <li><a href="#"><img src="" alt="alt text" /></a></li> 
    <li><a href="#"><img src="" alt="alt text" /></a></li></ul> 
    <ul id="menu"> 
    <li><a href="#"><img src="" alt="alt text" /></a></li> 
    <li><a href="#"><img src="" alt="alt text" /></a></li> 
    <li><a href="#"><img src="" alt="alt text" /></a></li> 
    <li><a href="#"><img src="" alt="alt text" /></a></li><li><a href="#"><img src="" alt="alt text" /></a></li> 
    </ul> 
    </div> 
    <div id ="contentdisplay" 
    <ul><li>content display</li></ul></div> 
    <div style="font-size:12px;color:#ccc"></div> 
    </body> 
    </html>

來源

2013-05-20 Mouse Trap

我認爲這個鏈接可以幫助您
jsfiddle.net/PwqEX/

我加2格，但如果你想添加更多的div只是看javascript方法

來源

2013-05-20 08:49:50 Bip

加載動態縮略圖和內容

回答

相關問題