jquery自定义实现类title属性悬浮框，并单击悬浮框复制悬浮框内容

最新推荐文章于 2023-01-03 17:42:11 发布

朵儿朵儿飞飞飞

最新推荐文章于 2023-01-03 17:42:11 发布

阅读量734

点赞数 1

分类专栏：前端JS

本文链接：https://blog.csdn.net/yjx891215/article/details/81943818

版权

前端JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图：

鼠标移到test按钮上，实现提示悬浮框，移出，则消失。

单击悬浮框则提示复制成功，内容复制到剪切板中。复制失败，则可手动复制。

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../resources/jquery.min-1.11.1.js"></script>
<script type="text/javascript" src="../resources/clipboard.min.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">

$(function(){
	
	//$.copy($(".header"),'showDiv','123');
	
 	$(".header").mouseover(function (e){
        var theEvent = window.event|| e;
        var showDiv = $('.showDiv');
        var left = theEvent.pageX;
        var top = theEvent.pageY;
        showDiv.css('left',left+"px");
        showDiv.css('top',top+"px");
        $('.showDiv').attr('data-clipboard-text','1111111111111');
        $('.showDiv').html('1111111111111')
        $(".showDiv").show();
	}).mouseout(function (e){
		var showDiv = $('.showDiv');
		$(".showDiv").hide();
	});
	
	$(".showDiv").mouseover(function (){  
	    $(".showDiv").show(); 
	}).mouseout(function (){  
		$(".showDiv").hide();
	});
	
	var clipboard = new Clipboard('.showDiv');
	   clipboard.on('success', function(e) {
		   console.log(e);
	        alert("复制成功！")
		    });
	   clipboard.on('error', function(e) {
		           console.log(e);
		           alert("复制失败！请手动复制")
		 	});
	
})
  

</script>
<style type="text/css">
.showDiv{
	cursor: pointer;
	border: 1px solid #928f8f;
	font-size: 12px;
	padding: 2px 5px;
}

</style>
<body>

<div>
	<input type="button" class="header" value="test">
</div>

<a class="showDiv" style="display: none;" data-clipboard-text="">复制</a>





</body>
</html>