怎么实现简单带有指向点击处箭头的说明窗口
日期：2014-05-16 浏览次数：20474 次
如何实现简单带有指向点击处箭头的说明窗口
效果类似于iPhone中的PopView：
考虑用弹出浮动div的方法，但是不知道有没有什么正统方案？谢谢
------解决方案--------------------
------解决方案--------------------
点击事件时判断鼠标点击的位置，然后将DIV框位置和鼠标位置设置相同，通常用event.clientX和event.clientY获取鼠标坐标，当然这个是屏幕位置，如果有滚动条且滚动需要加上相对位移，这个你可以网上搜索下相关文章解决。
效果类似于iPhone中的PopView：
考虑用弹出浮动div的方法，但是不知道有没有什么正统方案？谢谢
------解决方案--------------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
body{ font:12px "宋体";}
#aa{cursor:pointer;}
#bb{display:none;color:#000;border:1px solid #000;background-color:#ccc;width:100px;height:100px;}
#bb span{width:30px;height:30px;line-height:30px;text-align:center;background-color:#fff;display:block;float:left;margin:0 10px;cursor:pointer;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#aa").click(function(){
$("#bb").css("display","block");
});
$("#ok").click(function(){
$("#aa").fadeOut(500);
$("#bb").fadeOut(500);
});
$("#no").click(function(){
$("#bb").fadeOut(500);
});
});
</script>
</head>
<body>
<div id="aa">请点击我</div>
<div id="bb"><span id="ok">确定</span><span id="no">取消</span></div>
</body>
</html>
------解决方案--------------------
点击事件时判断鼠标点击的位置，然后将DIV框位置和鼠标位置设置相同，通常用event.clientX和event.clientY获取鼠标坐标，当然这个是屏幕位置，如果有滚动条且滚动需要加上相对位移，这个你可以网上搜索下相关文章解决。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
