首页 | 新闻 | 交流 | 问吧 | 文档 | 手册 | 下载 | 博客

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();
})