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

jquery实现div遮罩效果，并获取鼠标位置。

2009-08-28 13:30 826 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style>
.divmain {
z-index: 9999;
margin: 0 auto;
width: 400px;
align: left;
padding : 10px;
position: absolute;
background: #fff;
padding: 10px;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>div遮罩效果并跟随鼠标弹出</title>
<script src="../../js/jquery.js" type="text/javascript"></script>
</head>

<body style="background-color:black;" onload="javascript:init();">

<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="25%" onclick="javascript:showDiv('viewDiv');" >
<a href="#" > 开始 </a>
</td>
</tr>
</table>

<div id='mask' style="display: none"></div>
<div id="viewDiv" style="display:none;">
<table class="divmain" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20%">
标题:<font color="red">*</font>
</td>
<td width="80%">
<input type="text" name="title_view" id="title_view" size="35">
</td>
<td onclick="javascript:hideDiv('viewDiv');" >
关闭
</td>
</tr>
</table>
</div>

</body>
</html>

<script language="javascript">

function init(){
document.onmousemove = mouseMove;
}

var mouseleft = 0;
var mousetop = 0;

function mouseMove(e){
if(!document.all){

mouseleft=e.pageX;
mousetop=e.pageY;
}else{
mouseleft=document.body.scrollLeft+event.clientX;
mousetop=document.body.scrollTop+event.clientY;
}

}

function showDiv(div_id) {
var div_obj = $("#"+div_id);
var windowWidth = document.body.clientWidth;
var windowHeight = document.body.clientHeight;
var popupHeight = div_obj.height();
var popupWidth = div_obj.width();

//添加并显示遮罩层
$("#mask").css({"opacity":"0.6","display":"block","position": "absolute","background-color":"#fff"})
.width(windowWidth * 0.99)
.height(windowHeight * 0.99)
.click(function() {hideDiv(div_id); })
.fadeIn(100);
div_obj.css({"position": "absolute"})
.animate({left: mouseleft, top: mousetop, opacity: "show" }, "fast");
}

function hideDiv(div_id) {
$("#mask").css({"display":"none"});
$("#" + div_id).animate({left: 0, top: 0, opacity: "hide" }, "slow");
}

</script>

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

标签：

相关文章推荐

新的分享

章节导航