jquery鼠标跟随框~

效果如下图：使用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();
})

转载于:https://www.cnblogs.com/CherryGhost/archive/2011/05/31/2064190.html