jquery点击左侧菜单右侧推送弹出内容显示效果代码



160 638 213



特效描述:点击左侧菜单 右侧推送弹出 弹出内容显示,大气简洁,自己从别地方整理出来的感觉不错的效果,共享给各位

代码结构

1. 引入CSS

<link href="css/index.css" rel="stylesheet" type="text/css">

2. 引入JS

<script src="js/jquery-1.js"></script>
<script src="js/js.js"></script>

3. HTML代码

<div id="index_all">
    <div id="index_left">    
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody><tr>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td><table border="0" cellpadding="0" cellspacing="0" align="right" width="180">
            <tbody><tr>
              <td width="210"><!--<img src="images/en.jpg" height="17" width="50"> <img src="images/zw.jpg" height="17" width="51">--></td>
            </tr>
          </tbody></table></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td><table border="0" cellpadding="0" cellspacing="0" align="right" width="180">
            <tbody><tr>
              <td width="210"><a href="/"><!--<img src="images/logo.jpg" height="54" width="153">--></a></td>
            </tr>
          </tbody></table></td>
        </tr>
        <tr>
          <td height="40">&nbsp;</td>
        </tr>
        <tr>
          <td>
          	<div class="index_menu">
            <ul>
            <li><a href="/"><div>导航菜单</div></a></li>
            <li><a href="/"><div>导航菜单</div></a></li>
            <li><a href="/"><div>导航菜单</div></a></li>
            <li><a href="/"><div>导航菜单</div></a></li>
            <li><a href=""><div>导航菜单</div></a></li>
            <li style=" border-bottom:solid #191B1A 1px;"><a href=""><div>导航菜单</div></a></li>
            </ul>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <script>
          	$().ready(function(e) {
                $(".ny_menu").show(100);
				<!--鼠标移上后高亮显示菜单-->
				$(".dmenu").mouseover(function(){ 
					$(this).addClass("liang_menu");
				})
				$(".dmenu").mouseout(function(){ 
					$(this).removeClass("liang_menu");
				})
				<!--点击资本按钮时-->
				$("#zb_bu").click(function(){ 
					$(".hide_d").hide(); //所有子菜单隐藏
					$(".dmenu").removeClass("liang_menu1"); //所有子菜单去红色高亮背景
					$(this).find(".dmenu").addClass("liang_menu1"); //当前子菜单加红色高亮背景
					$("#zb_menu").show(500); // 显示下级菜单
					$("#mid_body").animate({ "margin-left": '-370px' }, "50"); //中间向左移动
					//右侧内容变为资本的
					$("#index_r_body").hide();
					$("#zc_r_body").hide();
					$("#jz_r_body").hide();
					$("#zb_r_body").show();
					$(".qm_right").hide(); //当前按钮隐藏
					$(".qm_left").show(); //向右按钮显示
					$("#index_right").animate({ left: '580px' }, "50"); //如果大图在左边向右移动
				})
				<!--点击资产按钮时-->
				$("#zc_bu").click(function(){ 
					$(".hide_d").hide();  //所有子菜单隐藏
					$(".dmenu").removeClass("liang_menu1"); //所有子菜单去红色高亮背景
					$(this).find(".dmenu").addClass("liang_menu1"); //当前子菜单加红色高亮背景
					$("#zc_menu").show(500); // 显示下级菜单
					$("#mid_body").animate({ "margin-left": '-740px' }, "50"); //向左移动
					//右侧内容变为资本的
					$("#index_r_body").hide();
					$("#zb_r_body").hide();
					$("#jz_r_body").hide();
					$("#zc_r_body").show();
					$(".qm_right").hide(); //当前按钮隐藏
					$(".qm_left").show(); //向右按钮显示
					$("#index_right").animate({ left: '580px' }, "50"); //如果大图在左边向右移动
				})
				<!--点击建设按钮时-->
				$("#jz_bu").click(function(){ 
					$(".hide_d").hide();  //所有子菜单隐藏
					$(".dmenu").removeClass("liang_menu1"); //所有子菜单去红色高亮背景
					$(this).find(".dmenu").addClass("liang_menu1"); //当前子菜单加红色高亮背景
					$("#jz_menu").show(500); // 显示下级菜单
					$("#mid_body").animate({ "margin-left": '-1110px' }, "50"); //向左移动
					//右侧内容变为资本的
					$("#index_r_body").hide();
					$("#zb_r_body").hide();
					$("#zc_r_body").hide();
					$("#jz_r_body").show();
					$(".qm_right").hide(); //当前按钮隐藏
					$(".qm_left").show(); //向右按钮显示
					$("#index_right").animate({ left: '580px' }, "50"); //如果大图在左边向右移动
				})
				<!--点击建设按钮时-->
				<!--显示资本子菜单-->
				<!--显示资产子菜单-->
				<!--显示建筑子菜单-->
				            });
          </script>
          	<div class="ny_menux">
            <ul>
            	<li id="zb_bu"><a href="javascript:void(0);"><div class="dmenu">二级导航菜单</div></a>
                <div id="zb_menu" class="hide_d"><ul>
                    	<li><a href="/"><div>导航菜单3</div></a></li>
                        <li><a href="/"><div>导航菜单3</div></a></li>
                        <li><a href="/"><div>导航菜单3</div></a></li>
                        <li><a href="/"><div>导航菜单3</div></a></li>
                        <li><a href="/"><div>导航菜单3</div></a></li>
                        <li><a href="/"><div>导航菜单3</div></a></li>
                 </ul></div></li>
              <li id="zc_bu"><a href="javascript:void(0);"><div class="dmenu">二级导航菜单</div></a>
                <div id="zc_menu" class="hide_d"><ul>
                    	<li><a href="/"><div>导航菜单3</div></a></li>
                        <li><a href="/"><div>导航菜单3</div></a></li>
                        <li><a href="/"><div>导航菜单3</div></a></li>
                        <li><a href="/"><div>导航菜单3</div></a></li>
                        <li><a href="/"><div>导航菜单3</div></a></li>
                        <li><a href="/"><div>导航菜单3</div></a></li>
                    </ul></div></li>
                <li id="jz_bu"><a href="javascript:void(0);"><div class="dmenu ">二级导航菜单</div></a>
                <div id="jz_menu" class="hide_d"><ul>
                    	<li><a href="/"><div>导航菜单3</div></a></li>
                        <li><a href="/"><div>导航菜单3</div></a></li>
                        <li><a href="/"><div>导航菜单3</div></a></li>
                        <li><a href="/"><div>导航菜单3</div></a></li>
                        <li><a href="/"><div>导航菜单3</div></a></li>
                        <li><a href="/"><div>导航菜单3</div></a></li>
                    </ul></div></li>
            </ul>
            </div>
          </td>
        </tr>
      </tbody></table>
    </div>
<div id="mid_use">  
    <div id="mid_body">
    <!--首页中间位置-->
    <div id="index_mid">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody><tr>
          <td><img src="images/20140105134447204138.jpg" height="502" width="370"></td>
        </tr>
        <tr>
          <td height="20"></td>
        </tr>
        <tr>
          <td height="20"><table border="0" cellpadding="0" cellspacing="0" width="370">
            <tbody><tr>
                          <td align="center">
              <table border="0" cellpadding="0" cellspacing="0" width="160">
	            <tbody><tr><td height="135" width="185">
	            <a href="/" class="sh_12">
	            <img src="images/20140708103527950408.jpg" height="135" width="185"></a></td></tr>
                <tr><td class="sh_12" height="10"></td></tr>
                <tr><td align="left" height="40" valign="top" width="185">
                <div style="margin:0px 5px;"><a href="/" class="sh_12">地产公开课南京站开讲</a></div>
                </td></tr>
              </tbody></table>
              </td>
                          <td align="center">
              <table border="0" cellpadding="0" cellspacing="0" width="160">
	            <tbody><tr><td height="135" width="185">
	            <a href="/" class="sh_12">
	            <img src="images/20140703092842590483.jpg" height="135" width="185"></a></td></tr>
                <tr><td class="sh_12" height="10"></td></tr>
                <tr><td align="left" height="40" valign="top" width="185">
                <div style="margin:0px 5px;"><a href="/" class="sh_12">开课将于7月5日启动</a></div>
                </td></tr>
              </tbody></table>
              </td>
            </tr>
          </tbody></table></td>
        </tr>
        <tr>
          <td height="70"></td>
        </tr>
        <tr>
          <td align="center" height="20"><table border="0" cellpadding="0" cellspacing="0" align="center" width="342">
                        <tbody><tr>
              <td align="left" width="370"><a href="." class="sh_12">[2014-06-16]</a></td>
            </tr>
            <tr>
              <td align="left"><a href="/" class="sh_12">聪:大虹桥核心商务区开发是一个有差异性的...</a></td>
            </tr>
            <tr>
              <td align="left" height="5"></td>
            </tr>
                        <tr>
              <td align="left" width="370"><a href="/" class="sh_12">[2014-06-16]</a></td>
            </tr>
            <tr>
              <td align="left"><a href="/" class="sh_12">《地产产管理董事兼联席总裁:儒商...</a></td>
            </tr>
            <tr>
              <td align="left" height="5"></td>
            </tr>
                        <tr>
              <td align="left" width="370"><a href="/" class="sh_12">[2014-05-31]</a></td>
            </tr>
            <tr>
              <td align="left"><a href="/" class="sh_12">庆六一“快乐探索小世界”活动...</a></td>
            </tr>
            <tr>
              <td align="left" height="5"></td>
            </tr>
                      </tbody></table></td>
        </tr>
        <tr>
          <td height="20"></td>
        </tr>
        <tr>
          <td align="center" height="20"><table border="0" cellpadding="0" cellspacing="1" align="center" bgcolor="#959595" width="342">
            <tbody><tr>
              <td align="left" bgcolor="#FFFFFF" height="25" width="370"><a href="/" class="sh_12"> 更多&gt;&gt;</a></td>
            </tr>
          </tbody></table></td>
        </tr>
        <tr>
          <td height="20"></td>
        </tr>
      </tbody></table>
    </div>
    <!--资本中间位置-->
    <div id="zb_mid">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody><tr>
          <td><img src="images/20131125142345910627.jpg" height="502" width="370"></td>
        </tr>
        <tr>
          <td height="20"><table border="0" cellpadding="0" cellspacing="0" width="370">
            <tbody><tr>
                          <td align="center">
              <table border="0" cellpadding="0" cellspacing="0" width="160">
	            <tbody><tr><td height="135" width="185">
	            <a href="/" class="sh_12">
	            <img src="images/20140708103527950408.jpg" height="135" width="185"></a></td></tr>
                <tr><td class="sh_12" height="10"></td></tr>
                <tr><td align="left" height="40" valign="top" width="185">
                <div style="margin:0px 5px;"><a href="/" class="sh_12">业地产公开课南京站开讲</a></div>
                </td></tr>
              </tbody></table>
              </td>
                          <td align="center">
              <table border="0" cellpadding="0" cellspacing="0" width="160">
	            <tbody><tr><td height="135" width="185">
	            <a href="/" class="sh_12">
	            <img src="images/20140703092842590483.jpg" height="135" width="185"></a></td></tr>
                <tr><td class="sh_12" height="10"></td></tr>
                <tr><td align="left" height="40" valign="top" width="185">
                <div style="margin:0px 5px;"><a href="/" class="sh_12">地产公开课将于7月5日启动</a></div>
                </td></tr>
              </tbody></table>
              </td>
            </tr>
          </tbody></table></td>
        </tr>
        <tr>
          <td height="70"></td>
        </tr>
        <tr>
          <td align="center" height="20"><table border="0" cellpadding="0" cellspacing="0" align="center" width="342">
                        <tbody><tr>
              <td align="left" width="370"><a href="/" class="sh_12">[2014-05-31]</a></td>
            </tr>
            <tr>
              <td align="left"><a href="/" class="sh_12">庆六一“快乐探索小世界”活动...</a></td>
            </tr>
            <tr>
              <td align="left" height="5"></td>
            </tr>
                        <tr>
              <td align="left" width="370"><a href="/" class="sh_12">[2014-05-29]</a></td>
            </tr>
            <tr>
              <td align="left"><a href="/" class="sh_12">座《购物中心的设计与产品要点》成功举行...</a></td>
            </tr>
            <tr>
              <td align="left" height="5"></td>
            </tr>
                        <tr>
              <td align="left" width="370"><a href="/" class="sh_12">[2014-05-14]</a></td>
            </tr>
            <tr>
              <td align="left"><a href="/" class="sh_12">高栋:武汉大跃进“痛并快乐着”...</a></td>
            </tr>
            <tr>
              <td align="left" height="5"></td>
            </tr>
                      </tbody></table></td>
        </tr>
        <tr>
          <td height="20"></td>
        </tr>
        <tr>
          <td align="center" height="20"><table border="0" cellpadding="0" cellspacing="1" align="center" bgcolor="#959595" width="342">
            <tbody><tr>
              <td align="left" bgcolor="#FFFFFF" height="25" width="370"><a href="/" class="sh_12"> 更多&gt;&gt;</a></td>
            </tr>
          </tbody></table></td>
        </tr>
        <tr>
          <td height="20"></td>
        </tr>
      </tbody></table>
    </div>
    <!--资产中间位置-->
    <div id="zc_mid">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody><tr>
          <td><img src="images/20131125142311184035.jpg" height="502" width="370"></td>
        </tr>
        <tr>
          <td height="20"></td>
        </tr>
        <tr>
          <td height="20"><table border="0" cellpadding="0" cellspacing="0" width="370">
            <tbody><tr>
                          <td align="center">
              <table border="0" cellpadding="0" cellspacing="0" width="160">
	            <tbody><tr><td height="135" width="185">
	            <a href="/" class="sh_12">
	            <img src="images/20140708103527950408.jpg" height="135" width="185"></a></td></tr>
                <tr><td class="sh_12" height="10"></td></tr>
                <tr><td align="left" height="40" valign="top" width="185">
                <div style="margin:0px 5px;"><a href="h/" class="sh_12">是人的合法身份感受到个</a></div>
                </td></tr>
              </tbody></table>
              </td>
                          <td align="center">
              <table border="0" cellpadding="0" cellspacing="0" width="160">
	            <tbody><tr><td height="135" width="185">
	            <a href="/" class="sh_12">
	            <img src="images/20140703092842590483.jpg" height="135" width="185"></a></td></tr>
                <tr><td class="sh_12" height="10"></td></tr>
                <tr><td align="left" height="40" valign="top" width="185">
                <div style="margin:0px 5px;"><a href="/" class="sh_12">是人的合法身份感受到个7月5日启动</a></div>
                </td></tr>
              </tbody></table>
              </td>
            </tr>
          </tbody></table></td>
        </tr>
        <tr>
          <td height="70"></td>
        </tr>
        <tr>
          <td align="center" height="20"><table border="0" cellpadding="0" cellspacing="0" align="center" width="342">
                        <tbody><tr>
              <td align="left" width="370"><a href="/" class="sh_12">[2014-06-16]</a></td>
            </tr>
            <tr>
              <td align="left"><a href="/" class="sh_12">《地产品》是人的合法身份感受到个:儒商...</a></td>
            </tr>
            <tr>
              <td align="left" height="5"></td>
            </tr>
                        <tr>
              <td align="left" width="370"><a href="/" class="sh_12">[2014-05-31]</a></td>
            </tr>
            <tr>
              <td align="left"><a href="/" class="sh_12">是人的合法身份感受到个“是人的合法身份感受到个”活动...</a></td>
            </tr>
            <tr>
              <td align="left" height="5"></td>
            </tr>
                        <tr>
              <td align="left" width="370"><a href="/" class="sh_12">[2014-05-29]</a></td>
            </tr>
            <tr>
              <td align="left"><a href="/" class="sh_12">是人的合法身份感受到个SPS专题讲座《购物中心的设计与产品要点》成功举行...</a></td>
            </tr>
            <tr>
              <td align="left" height="5"></td>
            </tr>
                      </tbody></table></td>
        </tr>
        <tr>
          <td height="20"></td>
        </tr>
        <tr>
          <td align="center" height="20"><table border="0" cellpadding="0" cellspacing="1" align="center" bgcolor="#959595" width="342">
            <tbody><tr>
              <td align="left" bgcolor="#FFFFFF" height="25" width="370"><a href="/" class="sh_12"> 更多&gt;&gt;</a></td>
            </tr>
          </tbody></table></td>
        </tr>
        <tr>
          <td height="20"></td>
        </tr>
      </tbody></table>
    </div>
    <!--建设设计中间位置-->
    <div id="jz_mid">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody><tr>
          <td><img src="images/20131231141044870660.jpg" height="502" width="370"></td>
        </tr>
        <tr>
          <td height="20"></td>
        </tr>
        <tr>
          <td height="20"><table border="0" cellpadding="0" cellspacing="0" width="370">
            <tbody><tr>
                          <td align="center">
              <table border="0" cellpadding="0" cellspacing="0" width="160">
	            <tbody><tr><td height="135" width="185">
	            <a href="/" class="sh_12">
	            <img src="images/20140430103415991891.jpg" height="135" width="185"></a></td></tr>
                <tr><td class="sh_12" height="10"></td></tr>
                <tr><td align="left" height="40" valign="top" width="185">
                <div style="margin:0px 5px;"><a href="/" class="sh_12">是人的合法身份感受到个:增加儿童业态 是否...</a></div>
                </td></tr>
              </tbody></table>
              </td>
                          <td align="center">
              <table border="0" cellpadding="0" cellspacing="0" width="160">
	            <tbody><tr><td height="135" width="185">
	            <a href="/" class="sh_12">
	            <img src="images/20140421134329239732.jpg" height="135" width="185"></a></td></tr>
                <tr><td class="sh_12" height="10"></td></tr>
                <tr><td align="left" height="40" valign="top" width="185">
                <div style="margin:0px 5px;"><a href="/" class="sh_12">“是人的合法身份感受到个365商业考察团上海之旅”圆满结束...</a></div>
                </td></tr>
              </tbody></table>
              </td>
            </tr>
          </tbody></table></td>
        </tr>
        <tr>
          <td height="70"></td>
        </tr>
        <tr>
          <td align="center" height="20"><table border="0" cellpadding="0" cellspacing="0" align="center" width="342">
                        <tbody><tr>
              <td align="left" width="370"><a href="/" class="sh_12">[2014-04-11]</a></td>
            </tr>
            <tr>
              <td align="left"><a href="/" class="sh_12">是人的合法身份感受到个“第七届中国商业地产发展高峰论坛”...</a></td>
            </tr>
            <tr>
              <td align="left" height="5"></td>
            </tr>
                        <tr>
              <td align="left" width="370"><a href="/" class="sh_12">[2014-04-09]</a></td>
            </tr>
            <tr>
              <td align="left"><a href="/" class="sh_12">佛挡杀佛“优秀商业设计...</a></td>
            </tr>
            <tr>
              <td align="left" height="5"></td>
            </tr>
                        <tr>
              <td align="left" width="370"><a href="/" class="sh_12">[2014-03-31]</a></td>
            </tr>
            <tr>
              <td align="left"><a href="/" class="sh_12">是人的合法身份感受到个“微门户”正式上线:“等你来敲门”!...</a></td>
            </tr>
            <tr>
              <td align="left" height="5"></td>
            </tr>
                      </tbody></table></td>
        </tr>
        <tr>
          <td height="20"></td>
        </tr>
        <tr>
          <td align="center" height="20"><table border="0" cellpadding="0" cellspacing="1" align="center" bgcolor="#959595" width="342">
            <tbody><tr>
              <td align="left" bgcolor="#FFFFFF" height="25" width="370"><a href="/" class="sh_12"> 更多&gt;&gt;</a></td>
            </tr>
          </tbody></table></td>
        </tr>
        <tr>
          <td height="20"></td>
        </tr>
      </tbody></table>
    </div>
    <!--建设设计中间完---->
    </div>
</div>    
<!--首页右侧内容。。。-->
<script>
	$().ready(function(e) {
		$(".qm_left").click(function(){ 
			$(".qm_left").hide(); //当前按钮隐藏
			$(".qm_right").show(); //向右按钮显示
			$("#index_right").animate({ left: '210px' }, "50"); //向左移动
		})
		$(".qm_right").click(function(){ 
			$(".qm_right").hide(); //当前按钮隐藏
			$(".qm_left").show(); //向右按钮显示
			$("#index_right").animate({ left: '580px' }, "50"); //向右移动
		})
		//点击联系按钮时,显示隐藏
		$(".contact").toggle(function(){ 
			$(".contact_body").fadeIn(100);
		},function(){ 
			$(".contact_body").fadeOut(100);
		})
    });
</script>
<div style="left: 580px;" id="index_right">
   	  <div id="index_r_body" style="background-image:url(images/20131112151607120269.jpg); background-repeat:no-repeat; background-position:left middle;">
        <!--联系我们按钮-->
        <div class="contact"><img src="images/cntact.jpg" height="90" width="25"></div>
        <div class="contact_body"><img src="images/ewm.jpg" height="175" width="120"></div>
        <div style="display: none;" class="qm_right" id="sy_r"><img src="images/qm.jpg" height="60" width="25"></div>
        <div style="display: block;" class="qm_left" id="sy_l"><img src="images/qml.jpg" height="60" width="25"></div>
            <table border="0" cellpadding="0" cellspacing="0" width="490">
              <tbody><tr>
                <td height="80" width="1500">&nbsp;</td>
              </tr>
              <tr>
                <td><table border="0" cellpadding="0" cellspacing="0" align="right" width="405">
                  <tbody><tr>
                    <td><div style="width:3px; height:230px; float:left; margin-top:5px; background-color:#74777E;"></div><table border="0" cellpadding="0" cellspacing="0" align="right" width="380">
                      <tbody><tr>
                        <td width="430"><img src="images/hui_z.png" height="112" width="251"></td>
                      </tr>
                      <tr>
                        <td height="20">&nbsp;</td>
                      </tr>
                      <tr>
                        <td><table border="0" cellpadding="0" cellspacing="0" width="320">
                          <tbody><tr>
                            <td width="126"><a href="/"><img src="images/b1_002.png" name="Image26" id="Image26" height="104" width="104"></a></td>
                            <td width="127"><a href="/"><img src="images/b2.png" name="Image27" id="Image27" height="104" width="104"></a></td>
                            <td width="127"><a href="/"><img src="images/b3.png" name="Image28" id="Image28" height="104" width="105"></a></td>
                          </tr>
                        </tbody></table></td>
                      </tr>
                    </tbody></table></td>
                  </tr>
                </tbody></table></td>
              </tr>
            </tbody></table>
    </div>
    <div id="zb_r_body" style="background-image:url(img/big2.jpg); background-repeat:no-repeat; background-position:left middle; ">
      <!--联系我们按钮-->
        <div class="contact"><img src="images/cntact.jpg" height="90" width="25"></div>
        <div class="contact_body"><img src="images/ewm.jpg" height="175" width="120"></div>
      <div style="display: none;" class="qm_right" id="sy_r"><img src="images/qm.jpg" height="60" width="25"></div>
      <div style="display: block;" class="qm_left" id="sy_l"><img src="images/qml.jpg" height="60" width="25"></div>
            <table border="0" cellpadding="0" cellspacing="0" width="490">
              <tbody><tr>
                <td height="80" width="1500">&nbsp;</td>
              </tr>
              <tr>
                <td><table border="0" cellpadding="0" cellspacing="0" align="right" width="405">
                  <tbody><tr>
                    <td><div style="width:3px; height:230px; float:left; margin-top:5px; background-color:#74777E;"></div>
                      <table border="0" cellpadding="0" cellspacing="0" align="right" width="380">
                        <tbody><tr>
                          <td width="430"><img src="images/hui_z.png" height="112" width="251"></td>
                        </tr>
                        <tr>
                          <td height="20">&nbsp;</td>
                        </tr>
                        <tr>
                          <td><table border="0" cellpadding="0" cellspacing="0" width="320">
                            <tbody><tr>
                              <td width="126"><a href="/"><img src="images/b1_002.png" name="Image1" id="Image1" height="104" width="104"></a></td>
                              <td width="127"><a href="/"><img src="images/b2.png" name="Image21" id="Image21" height="104" width="104"></a></td>
                              <td width="127"><a href="/"><img src="images/b3.png" name="Image31" id="Image31" height="104" width="105"></a></td>
                            </tr>
                          </tbody></table></td>
                        </tr>
                      </tbody></table></td>
                  </tr>
                </tbody></table></td>
              </tr>
            </tbody></table>
    </div>
    <div id="zc_r_body" style="background-image:url(uppic/20131111/20131111093005807162.jpg); background-repeat:no-repeat; background-position:left middle;">
      <!--联系我们按钮-->
        <div class="contact"><img src="images/cntact.jpg" height="90" width="25"></div>
        <div class="contact_body"><img src="images/ewm.jpg" height="175" width="120"></div>
      <div style="display: none;" class="qm_right" id="sy_r"><img src="images/qm.jpg" height="60" width="25"></div>
      <div style="display: block;" class="qm_left" id="sy_l"><img src="images/qml.jpg" height="60" width="25"></div>
            <table border="0" cellpadding="0" cellspacing="0" width="490">
              <tbody><tr>
                <td height="80" width="1500">&nbsp;</td>
              </tr>
              <tr>
                <td><table border="0" cellpadding="0" cellspacing="0" align="right" width="405">
                  <tbody><tr>
                    <td><div style="width:3px; height:230px; float:left; margin-top:5px; background-color:#74777E;"></div>
                      <table border="0" cellpadding="0" cellspacing="0" align="right" width="380">
                        <tbody><tr>
                          <td width="430"><img src="images/hui_z.png" height="112" width="251"></td>
                        </tr>
                        <tr>
                          <td height="20">&nbsp;</td>
                        </tr>
                        <tr>
                          <td><table border="0" cellpadding="0" cellspacing="0" width="320">
                            <tbody><tr>
                              <td width="126"><a href="/"><img src="images/b1_002.png" name="Image22" id="Image22" height="104" width="104"></a></td>
                              <td width="127"><a href="/"><img src="images/b2.png" name="Image32" id="Image32" height="104" width="104"></a></td>
                              <td width="127"><a href="/"><img src="images/b3.png" name="Image41" id="Image41" height="104" width="105"></a></td>
                            </tr>
                          </tbody></table></td>
                        </tr>
                      </tbody></table></td>
                  </tr>
                </tbody></table></td>
              </tr>
            </tbody></table>
    </div>
    <div id="jz_r_body" style="background-image:url(uppic/20131230/20131230143333436560.jpg); background-repeat:no-repeat; background-position:left middle; display:;">
      <!--联系我们按钮-->
        <div class="contact"><img src="images/cntact.jpg" height="90" width="25"></div>
        <div class="contact_body"><img src="images/ewm.jpg" height="175" width="120"></div>
      <div style="display: none;" class="qm_right" id="sy_r"><img src="images/qm.jpg" height="60" width="25"></div>
      <div style="display: block;" class="qm_left" id="sy_l"><img src="images/qml.jpg" height="60" width="25"></div>
            <table border="0" cellpadding="0" cellspacing="0" width="490">
              <tbody><tr>
                <td height="80" width="1500">&nbsp;</td>
              </tr>
              <tr>
                <td><table border="0" cellpadding="0" cellspacing="0" align="right" width="405">
                  <tbody><tr>
                    <td><div style="width:3px; height:165px; float:left; margin-top:5px; background-color:#fff;"></div>
                      <table border="0" cellpadding="0" cellspacing="0" align="right" width="380">
                        <tbody><tr>
                          <td width="430"><img src="images/sj.png" height="50" width="227"></td>
                        </tr>
                        <tr>
                          <td height="20">&nbsp;</td>
                        </tr>
                        <tr>
                          <td><table border="0" cellpadding="0" cellspacing="0" width="320">
                            <tbody><tr>
                              <td width="126"><a href="/"><img src="images/a1.png" id="Image43" height="105" width="103"></a></td>
                              <td width="127"><a href="/"><img src="images/b1.png" id="Image2" height="105" width="103"></a></td>
                              <td width="127"><a href="/"><img src="images/c1.png" id="Image3" height="105" width="103"></a></td>
                            </tr>
                          </tbody></table></td>
                        </tr>
                      </tbody></table></td>
                  </tr>
                </tbody></table></td>
              </tr>
            </tbody></table>
    </div>
</div>
<div class="bottomuse">
	<div class="left_bottom" style="margin-top:-260px;">
        <div class="bottom2"></div>
        <div class="bottom2" style="border-bottom:1px solid #191B1A; padding-bottom:10px; line-height:40px; background-image:url(jzimg/bottom_1.jpg); background-repeat:no-repeat; background-position:30px 3px;;"><a href="/" style="font-size:18px; font-family:微软雅黑; color:#00C; padding-left:8px;">  招贤纳士</a></div>
        <div class="bottom2" style="border-bottom:1px solid #191B1A; padding-bottom:10px; line-height:40px; background-image:url(jzimg/bottom_2.jpg); background-repeat:no-repeat; background-position:30px 3px;; margin-bottom:10px;"><a href="/" style="font-size:18px; font-family:微软雅黑; color:#00C; padding-left:8px;">联系我们</a></div>
      <div class="bottom3" style="margin-top:25px;"><a href="/"><img src="images/zxyd.jpg" height="53" width="131"></a></div>
        <!--<div class="bottome4"><div style="padding-left:22px;width:150px;">Copyright © 2013 三益中国<br>沪ICP备12044451号-1</div></div>-->
	</div>
</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 收缩菜单 收缩导航 右键菜单 导航切换 菜单切换 浮动菜单 浮动导航 滑动导航菜单 滑动导航 滑动菜单 滚动导航菜单 滚动菜单 滚动导航 弹出层拖动 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 浮动提示框 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 图片广告 提示框/弹出层 侧边菜单 侧边导航

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到