您的位置：首页 > 其它

鼠标点击不同位置触发的事件

2017-02-03 16:25 429 查看

自己用jquery简单的写了一个根据鼠标在不同位置的点击而在不同位置出现提示框的小程序，其中加了在窗口边缘处点击事件的判断。

下面是代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
border:1px solid red;
width:150px;
height:400px;
display:none;
position:absolute;
left:0px;
top:100px;
}
</style>
</head>
<body>
<div class="div1">我是弹出框中的内容</div>

<script src="jquery.js"></script>
<script>
document.onclick=function(event){
//        获取浏览器窗口的宽高
var height = $(window).height();
var width = $(window).width();
//        获取鼠标点击的位置
var left = event.clientX;
var top = event.clientY;
//        获取显示方块的宽高
var height1 = $('.div1').height();
var width1 = $('.div1').width();
//        计算出弹出框显示的位置
if(left+width1>width) {
left = width - width1-10+'px';
}
if(top+height1>height) {
top = height - height1-10+'px';
}
$(".div1").css({"display":'block',"left":left,"top":top});
}
</script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航