Html 在div中动态加载缩略图和内容_Html_Jquery Plugins

Html 在div中动态加载缩略图和内容

html jquery-plugins

Html 在div中动态加载缩略图和内容,html,jquery-plugins,Html,Jquery Plugins,您好，我想为在div1中单击的每个菜单在div2中加载缩略图。当前代码缩略图显示在pageload上。它应该仅在菜单单击时显示。而且，当我单击缩略图时，它应该在div3中显示不同的显示内容。如何为使用不同内容（图像和文本）单击的每个缩略图动态加载div3。检查我正在规划的布局的url 滚动菜单 $（文档）.ready（函数（）{ $（'#menu li'）。单击（函数（）{ window.location=$（this.find（'a'）.attr（'href'）； }).mouseover

您好，我想为在div1中单击的每个菜单在div2中加载缩略图。当前代码缩略图显示在pageload上。它应该仅在菜单单击时显示。而且，当我单击缩略图时，它应该在div3中显示不同的显示内容。如何为使用不同内容（图像和文本）单击的每个缩略图动态加载div3。检查我正在规划的布局的url


滚动菜单
$（文档）.ready（函数（）{
$（'#menu li'）。单击（函数（）{
window.location=$（this.find（'a'）.attr（'href'）；
}).mouseover（函数（）{
$（this.find（'a'））
.animate（{paddingLeft:padlight，paddingRight:padRight}，{queue:false，duration:100}）
.animate（{backgroundColor:colorOver}，{queue:false，duration:200}）；
}).mouseout（函数（）{
$（this.find（'a'））
.animate（{paddingLeft:defpadLeft，paddingRight:defpadRight}，{queue:false，duration:100}）
.animate（{backgroundColor:colorOut}，{queue:false，duration:200}）；
}); 
$（“#边栏”）.mousemove（函数（e）{
var s#u top=parseInt（$（'#边栏'）.offset（）.top）；
var s#u bottom=parseInt（$（'#边栏'）.height（）+s#top）；
var mheight=parseInt（$（'#菜单li'）.height（）*$（'#菜单li'）.length）；
$（“#调试_鼠标_轴”）.html（“X轴：+e.pageX+”|Y轴+e.pageY）；
$（'#调试状态'）.html（Math.round（（（s#u top-e.pageY）/100）*mheight/2））；
var top_值=数学圆整（（s_top-e.pageY）/100）*mHweight/2）；
$（“#菜单”）.animate（{top:top_value}，{queue:false，duration:500}）；
});
});
身体{
填充：0；
利润率：0.20px；
}
#边栏{
高度：400px；
溢出：隐藏；
位置：相对位置；
背景色：#fff；
}   
#菜单{
宽度：100%；
列表样式：无；
填充：0；
保证金：0；
排名：0；
位置：相对位置；
身高：100%；
宽度：300px；
}
#菜单里{
填充：10px0；
文本对齐：右对齐；
显示：块；
光标：手；
光标：指针；
}
#菜单李a{
背景：url（）重复#1f；
颜色：#ddd；
字体系列：helvetica、arial、verdana；
字体大小：9px；
字号：900；
显示：内联；
填充：20px 8px 5px 20px；
文字装饰：无；
}
#菜单里的跨度{
字体系列：乔治亚，arial；
字体大小：9px；
颜色：#4646；
}














我已经添加了2个div，但如果您想添加更多div，请查看JavaScript方法

$（“.text”）.hide（）；
$（“#左a.1”）。单击（函数（）{
$（“.text”）.hide（）；
$（“#textOne”）.fadeIn（）；
返回false；
});
$（“#左a.2”）。单击（函数（）{
$（“.text”）.hide（）；
$（“#textwoo”）.fadeIn（）；
返回false；
});
$（“#左a.3”）。单击（函数（）{
$（“.text”）.hide（）；
$（“#textThree”）.fadeIn（）；
返回false；
});
a{
文字装饰：无；
}
#包装纸{
宽度：600px；
}
#左{
边缘顶部：100px；
溢出：隐藏；
浮动：左；
宽度：20%；
}
#对{
溢出：隐藏；
浮动：左；
宽度：80%；
}







一
Zzril amet nisl康赛克拉利塔酒店。在阿利夸姆·多洛尔·奎迪亚姆·维尼安。这是我的工作，这是我的工作
二
在莱克托雷斯的魁诺比斯·努拉·欧盟。我不知道该怎么办。这是一个很好的解释
三
在莱克托雷斯的魁诺比斯·努拉·欧盟。我不知道该怎么办。这是一个很好的解释

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