随着互联网的发展，多语言交流变得越来越频繁。划词翻译功能能够提供便利，使用户可以直接在页面上划选文本进行翻译。本文介绍如何使用jQuery实现划词翻译功能。
1.引入jQuery库
首先，我们需要在页面中引入jQuery库。可以通过在HTML文件的<head>标签中添加以下代码引入：
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
2.HTML页面结构
接下来，我们需要在页面中添加用于显示翻译结果的元素，例如一个 <div> 标签。同时，需要在需要启用划词翻译功能的元素上添加一个特定的 class，例如 translate-text，用来标识需要翻译的文本。HTML代码示例如下：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<style>
#translation {
position: absolute;
top: 100px;
left: 100px;
padding: 10px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="translate-text">这是需要翻译的内容。</div>
<div id="translation"></div>
<script>
// 划词翻译代码将在下面插入
</script>
</body>
</html>
3.jQuery代码实现划词翻译
接下来，我们使用jQuery编写代码来实现划词翻译的功能。在 <script> 标签中添加以下代码：
<script>
$(document).ready(function() {
var timeout;
$(".translate-text").on("mouseup", function(event) {
var selectedText = window.getSelection().toString().trim();
if (selectedText) {
clearTimeout(timeout);
timeout = setTimeout(function() {
$.ajax({
url: "https://api.dictionaryapi.dev/api/v2/entries/en/" + selectedText,
type: "GET",
dataType: "json",
success: function(data) {
if (data.length > 0) {
var translation = data[0].meanings[0].definitions[0].definition;
$("#translation").html(translation).show();
}
},
error: function() {
console.log("翻译失败");
}
});
}, 500);
}
});
$(document).on("mousedown", function(event) {
clearTimeout(timeout);
$("#translation").hide();
});
});
</script>
代码解释：
- 当鼠标在需要翻译的文本上完成划词操作时，会触发
mouseup事件。 - 在划词结束后的500毫秒内，使用防抖技术使翻译请求仅发送一次。
- 判断是否有选中的文本。如果有选择的文本，则通过
ajax请求发送翻译请求到在线字典API。 - 将翻译结果显示在
<div>元素中，并通过show()方法将其显示出来。 - 当鼠标点击其他地方时，隐藏翻译结果。
4.CSS样式
最后，我们还需要添加一些CSS样式以使翻译结果在页面上得以展示。在 <head> 标签中添加以下样式：
<style>
#translation {
position: absolute;
top: 100px;
left: 100px;
padding: 10px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
</style>
通过设置 position 属性使翻译结果的 <div> 元素显示在页面的固定位置，同时设置其样式以增加可读性。
5.测试
完成以上步骤后，保存并打开HTML文件。在页面上选择并划选一段需要翻译的文本，稍等片刻即可在页面上看到翻译结果的显示。
通过jQuery实现基本的划词翻译功能为用户提供了便利，使得他们可以在不离开页面的情况下进行即时的翻译操作。希望本文对您有所帮助！
本文来自极简博客，作者：薄荷微凉，转载请注明原文链接：jQuery实现页面元素的划词翻译功能
