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



196 781 261



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

代码结构

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>



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


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 右键菜单 二级导航菜单 图片广告 文字提示框 下拉导航菜单 对联广告 提示框/弹出层 竖直导航菜单 layer 图标导航菜单 叠加浮动层 lightbox 固定导航菜单 侧边导航菜单 Tooltip工具提示框 树形导航菜单 浮动提示框 网址导航菜单 html5弹窗动画 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 悬浮浮动漂浮 弹出层拖动 窗口提示框 浮动提示框 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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