js实现对html添加批注及效果
时间: 2023-08-05 10:07:39 浏览: 48
以下是一个简单的实现示例,可以在需要批注的文本上鼠标选中并右键点击添加批注,效果为在选中文本附近弹出一个气泡显示批注内容:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML文本添加批注</title>
<style>
.bubble {
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body onmouseup="showBubble(event)">
<p>这是一段需要批注的文本。</p>
<p>这里也需要添加批注。</p>
<p>这是最后一段需要添加批注的文本。</p>
<div id="bubble" class="bubble" style="display: none;"></div>
<script>
function showBubble(event) {
var bubble = document.getElementById('bubble');
if (window.getSelection) {
var sel = window.getSelection();
var range = sel.getRangeAt(0);
var rect = range.getBoundingClientRect();
bubble.innerHTML = '这里是批注内容';
bubble.style.display = 'block';
bubble.style.top = (rect.top + window.pageYOffset - bubble.offsetHeight - 10) + 'px';
bubble.style.left = (rect.left + window.pageXOffset - bubble.offsetWidth / 2 + rect.width / 2) + 'px';
}
}
document.onmousedown = function() {
var bubble = document.getElementById('bubble');
bubble.style.display = 'none';
}
</script>
</body>
</html>
```
请注意,这只是一个简单的实现示例,实际实现中可能需要考虑更多的因素,例如对于多行文本的批注如何处理、如何保存批注等。