jquery 自动跳出列表

先上效果图:当鼠标经过相亲会自动弹出取最新的10条数据

html代码：

<a href="javascript:;" class="fn_activities">相亲会 <img src="__PUBLIC__/Images/arrow.png"/></a>

<!-- 相亲会 -->

    <div class="com-activities-content" id="com-activities-content" style="width=300px;">
        <volist name="ACT_LIST" id="ACT_LIST">
        <p>
            <a href="activities/{$ACT_LIST.id}.html" target="_blank">{$ACT_LIST.title|msubstr=0,10,'utf-8',true}</a>
        </p>
        </volist>
    </div>
<!-- end -->

 

jquery 代码如下：

  /*相亲会*/

     $(".fn_activities").hover(function()
       {
           var _x = $(this).offset().top; 
           var _y = $(this).offset().left; 
           var _h = $(".com-activities-content").height();
           var _ww = $(".com-activities-content").width(180);
           var _w = $(this).width();
           $(".com-activities-content").css({
                'top':  (_x - _h -3) + 'px',
               'left': (_y - _w) + 'px',
               'display': 'block'
           });
                
        },
    function(){
        
   });

    /*事件隐藏*/
    $('body').click(function(event) {  
    
      /*相亲会隐*/
       if($(event.target).parents("#com-activities-content").length==0 && event.target.id != "com-activities-content") {  
          $('#com-activities-content').slideUp();  
      }
    });

 

php取数据代码这个是用tp取数据，并做缓存：

    /*相亲会*/
    $Act_M=M('activities');
    $branch_id=$_COOKIE['curCityId'];
    $cacheName=$branch_id.'_Act';
    $Act_list=S($cacheName);
    if(empty($Act_list))
    {
      // $sql="select id,title from activities where branch_id='$branch_id' order by id desc limit 10";
      // $Act_list=$Act_M->query($sql);
      $Act_list=$Act_M->field('id,title')->where("branch_id='$branch_id' ")->order('id desc')->limit(10)->select();
      S($cacheName,$Act_list);
    }
    

最后就是输出前面html  把 php变量assign到前台就不写出来了