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

最新推荐文章于 2023-12-02 14:53:18 发布

oXiaoRenWu001

最新推荐文章于 2023-12-02 14:53:18 发布

阅读量4.4k

点赞数 1

分类专栏： JS CSS HTML 文章标签： html jquery CSS Javascript

本文链接：https://blog.csdn.net/itnobody/article/details/18351937

版权

JS 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

<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){
					//获取当前点击元素的class
					var v_id = $(e.target).attr('class');
					//如果class != c 隐藏DIV
					if(v_id != 'c'){
						$("#show").hide();
					}
				})
			});
			
			//显示被隐藏的DIV
			function 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>

oXiaoRenWu001

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
鼠标点击，在点击的地方出现提示框

鼠标点击，在点击的地方出现提示框$(document).ready(function(){ //触发class = c 的点击事件 $(".c").click(function(){ checkDiv($(this)); }); //给DOM绑定点击事件 $(document).bind('click',function(e){ //获取当前点击元素的class
复制链接

扫一扫