jquery鼠标跟随框~

时间：2011-05-31 来源：§ 薄樱 §

效果如下图：使用jquery做的。很简单几句代码就ok。

html代码：

<div><a href="#" id="doc01">最终方案01.doc</a></div>
<div><a href="#" id="doc02">最终方案01.doc</a></div>
<div><a href="#" id="doc03">最终方案01.doc</a></div>

漂浮框html代码：

        <div id="notes">
            <div id="note_doc01" class="notediv">  
                <div class="divtop" ></div>
                <div class="noteinfo" >
                    1 业务属性：数字营销-社区管理；文件大小：2mb
                </div>
                <div class="divbottom"></div>
            </div>

            <div id="note_doc02" class="notediv">  
                 <div class="divtop" ></div>
                <div class="noteinfo" >
                    2 业务属性：数字营销-社区管理；文件大小：2mb<br/>上传日期：2011-01-01；作者：admin；状态：正常<br/>文档描述：这里是项目文档这里是项目文档这里是项目文档
                </div>
                <div class="divbottom"></div>
            </div>
            
            <div id="note_doc03" class="notediv">  
                <div class="divtop" ></div>
                <div class="noteinfo" >
                    3 业务属性：数字营销-社区管理；文件大小：2mb<br/>上传日期：2011-01-01；作者：admin；状态：正常<br/>文档描述：这里是项目文档这里是项目文档这里是项目文档
                </div>
                <div class="divbottom"></div>
            </div>
        </div>

css样式：

.noteinfo{background: white;border-left: 1px solid #aeafaf;border-right: 1px solid #aeafaf;  line-height: 20px;padding:2px 3px}
.notediv{position: absolute; height: auto;width: 340px;left:20px;display: none }
 .divbottom{ height: 21px; background: url('../images/div_bottom.gif') no-repeat left top}
 .divtop{ height: 12px; background: url('../images/div_top.gif') no-repeat left top}

jquery代码：

            function showDocNote(){               
                var yOffset=60;
                $("a[id^=doc]").each(function(){
                    var id = this.id;  
                    $(this).hover(function(e){
                         var xOffset =  $("div[id=note_"+id+"]").height();
                        $("div[id=note_"+id+"]").css({display:"block",top:(e.pageY - xOffset) + "px",left:(e.pageX - yOffset) + "px"});
                    }, function(){
                        $("div[id=note_"+id+"]").css("display","none");
                    });
                });
            }
            
            $(function(){ 
                showDocNote();
            })