鼠标点击，在点击的地方出现提示框

来源：互联网发布：java基础入门推荐书籍编辑：程序博客网时间：2024/04/29 13:52
<html><head><meta charset="utf-8"><script type="text/javascript" src="jquery-1.9.1.js"></script></head><body><script type="text/javascript">$(document).ready(function(){//触发class = c  的点击事件$(".c").click(function(){checkDiv($(this));});//给DOM绑定点击事件$(document).bind('click',function(e){//获取当前点击元素的classvar v_id = $(e.target).attr('class');//如果class != c 隐藏DIVif(v_id != 'c'){$("#show").hide();}})});//显示被隐藏的DIVfunction checkDiv(obj){//获取当前点击的位置var offset = obj.offset(); //给要显示的DIV设置左边距var left = offset.left;var intleft = parseInt(left) + 15;//给要显示的DIV设置上边距var top = offset.top;var inttop = parseInt(top) +15;$("#show").show();$("#show").css({"background-color":'#33ee33',"position":'absolute',"z-index":10,"top":inttop,"left":intleft});}</script><div id="big"><div>aaaaaaaaaaaaaaaaaaaaaaaaaa<br>bbbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbb<span class="c">点击</span>bbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br>bbbbbbbbbbbbbbbbbbbbbbbbbb<br></div><div id="show" style="display:none;border:1px solid red;">要显示的内容</div></div></body></html>
4 0