类“soso网页快照”

          引言：最近被安排做一个类似“soso”的网页快照，参考了下“soso”的网页，自己想了想逻辑还是有点复杂的。在同事的一起努力下，终于得以完成，虽然说完成了安排的任务，但是和“soso”的效果还是不可同日而语，主要是js代码，下面一起看看！

  jsp代码：

   js:

//“table”事件
$(function(){
		$(".testTable").live('mouseover',function(e){
			//alert($(this).attr("id"));
			var flag=$("#jtFlag").val()
			var flag1=$("#divFlag").val()
			if($(this).attr("ids")!=flag&&flag1!=""&&flag!=""){
					$("div[names="+flag+"]").hide();//隐藏箭头
					$("div[id="+flag+"]").hide();//隐藏右边页面
			}
			$("#divFlag").val($(this).attr("ids"));
		})
})

//“网页快照”事件
$(function(){
		$(".webPhoto").live('mouseover',function(e){
		  //获得当前ＩＤ
		　　　var id=$(this).attr("ids");
		      var flag=$("#jtFlag").val()
		     if(flag!=id&&flag!=""){
		      $("div[names="+flag+"]").hide();//隐藏箭头
			  $("div[id="+flag+"]").hide();//隐藏右边页面
		     }
		     
		     $("#jtFlag").val(id);//把值赋给变量
		     $("div[names="+id+"]").css("position","absolute")
		     //alert($(".testTable").offset().top)
			 $("div[names="+id+"]").css("top",($(this).parent().offset().top+($(this).parent().height()-$(this).next().height())/2)+"px")
	  	     $("div[names="+id+"]").css("left",($(this).parent().offset().left+$(this).parent().width())+"px")
		     $("div[names="+id+"]").show();//显示箭头
		     
		     $("div[id="+id+"]").css("width",(document.body.clientWidth-$(this).parent().offset().left-$(this).next().width()-$(this).parent().width()-10)+"px")
			 $("div[id="+id+"]").css("height",($(window).height()-125)+"px")
			 $("div[id="+id+"]").css("position","fixed")
			 $("div[id="+id+"]").css("top",120)
			 $("div[id="+id+"]").css("left",($(this).parent().offset().left+$(this).parent().width()+$(this).next().width())+"px")
			 $("div[id="+id+"]").show();//显示右边页面
			 
			
		})
})

  代码解释：$(this).attr("id")：获得当前鼠标所在标签的id属性的值
                   div[names="+flag+"]：获得含有属性names并且值等于flag的div
                   $("div[names="+id+"]").css("position","absolute")：获得含有属性names并且值等于id的div，然后修改它的样式。
                   $(this).parent().offset().top：当前鼠标所在节点标签的上级节点标签到上边框的距离，在此应该是鼠标当前所在的标签所在的td，
                   $(this).parents("tr")则是获得当前鼠标所在节点标签的上级节点标签中的tr标签，括号类的字符串类似于选择器，选择匹配的父节点。
                   $(this).parent().width();当前鼠标所在节点标签的上级节点标签的宽度

                     

 页面：

<input type="hidden" value="" id="jtFlag">
<input type="hidden" value="" id="divFlag">
<c:choose>
 <c:when test="${fn:length(objsList)>0}">
  <c:forEach items="${objsList}" var="obj">
   <table border="0" cellpadding="0" cellspacing="0" class="testTable" ids="${obj[5]}"
     style="margin: auto; width: 100%; height: 100%;">
      <tr>
       <td height="25px" style="color: #AFAFAF">
         <span class="webPhoto" ids="${obj[5]}" style="width: 300px;height: 50px;cursor: pointer;">网页快照</span>
     <div id="jiantou" names="${obj[5]}" class="jiantou" style="display:none;">
     <img src="<c:url value='/image/jiantou.jpg'/>" />
     </div>
     <div id="${obj[5]}"
      style="z-index:999; display:none;right: 50px;width:600px; background-color: #ffffff;position: absolute;">    
     <iframe name="content" id="content"
      src="postInfoKey.do?action=postInfoKeyDetail&flag=1&postID=${obj[5]}" 
     scrolling="auto" width="100%" height="100%" 
     marginheight="0" marginwidth="0" frameBorder="0" >
     </iframe>      
      </div>
         </td>
        </tr>        
       </table>       
      </c:forEach>
     </c:when>
     <c:otherwise>
      <table border="0" cellpadding="0" cellspacing="0"
       style="margin: auto; width: 100%; height: 100%;">
       <tr>
        <td align="left">
         <br />
         无相关信息
         <br />
        </td>
       </tr>
      </table>
     </c:otherwise>
    </c:choose>		

  代码解释：这个table是放在一个循环里面的，${obj[5]}循环对象的值。
 

            这次的代码主要是让我了解到了，1、如何获得标签属性的值($(this).attr("ids"))和修改标签属性的值($(this).attr("ids",123))；2、如何获得节点标签的上级节点及上级节点的属性。