jquery鼠标跟随

Posted on 2011-08-31 15:16 PHP博客 阅读(535) 评论(0)  编辑 收藏 引用 网摘
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代码使用jquery实现权限添加的效果

<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>代工厂透露IPHONE5屏幕大小将缩水?

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");
});
});光缆宽带能接tplink吗
}

$(function(){
showDocNote();
})

只有注册用户登录后才能发表评论。
网站导航:

posts - 139, comments - 0, trackbacks - 0, articles - 0

Copyright © PHP博客