您的位置：首页 > Web前端 > JQuery

基于jquery的鼠标滑动详细显示框

2014-12-30 10:54 405 查看

jquery版本是1.x

HTML代码为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>detialDiaLog</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/detialDiaLog.js"></script>
<style type="text/css">
.detial{
width:100px;
height:100px;
border:1px solid #000;
position:relative;
cursor: pointer;
}
.detialHide{
display:none;
position:absolute;
top:0px;
left:0px;
width:100px;
height:30px;
background:green;
}
</style>
</head>
<body>
<div class="detial">
<div class='detialHide' name="detialHide">
详细文字
</div>
</div>

</body>
</html>

js代码为：

// JavaScript Document
$(document).ready(function() {
$(".detial").live('mouseenter',function(){
$(this).find("div[name='detialHide']").show();
});
$(".detial").live('mousemove',function(e){
$(this).find("div[name='detialHide']").css({top:e.pageY+10,left:e.pageX+10});
});
$(".detial").live('mouseleave',function(){
$(this).find("div[name='detialHide']").hide();
});
});

效果图为：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航