jQuery选中文本高亮页面淡出(jQuery-HTML5-CSS3实现的文本框)
- 资讯实事
- 2024-10-11 19:52:02
jQuery选中文本高亮页面淡出(jQuery-HTML5-CSS3实现的文本框)
jquery文本 高亮显示 页面淡出 半透明特效 jquery特效 jquery下载
要实现使用jQuery选中文本后高亮显示，并且使页面其他部分淡出的效果，可以分为两个步骤：首先是选中文本并高亮显示，其次是让页面其余部分淡出。这里给出一个简单的实现示例：
### HTML 结构
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 选中文本高亮与页面淡出示例</title>
<style>
.highlight {
background-color: yellow;
}
.fade {
opacity: 0.5;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>这是一个示例文本，你可以选中这段文字看看效果。</p>
<script>
$(document).ready(function() {
// 监听鼠标抬起事件，以便在选中文本后执行操作
$(document).mouseup(function() {
var selectedText = window.getSelection().toString();
if (selectedText) {
// 高亮显示选中的文本
var ranges = window.getSelection().getRangeAt(0);
var span = $('<span>' + selectedText + '</span>');
ranges.deleteContents();
ranges.insertNode(span[0]);
// 页面其余部分淡出
$('body').not('.highlight').addClass('fade');
} else {
// 如果没有选中文本，则移除高亮和恢复页面不透明度
$('.highlight').contents().unwrap();
$('body').removeClass('fade');
}
});
// 当用户点击页面任何地方时，取消选中状态以移除高亮和恢复页面
$(document).click(function() {
if (window.getSelection) {
window.getSelection().removeAllRanges();
} else if (document.selection) {
document.selection.empty();
}
$('.highlight').contents().unwrap();
$('body').removeClass('fade');
});
});
</script>
</body>
</html>
```
这段代码实现了基本的功能：
- 用户选中文本后，被选中的部分会被包裹在一个带有`.highlight`类的`<span>`标签内，从而改变背景色实现高亮效果。
- 同时，页面上除了被高亮的部分外，其余元素添加`.fade`类，通过CSS设置其透明度，实现淡出效果。
- 当用户点击页面或取消选中时，会移除高亮样式和页面的淡出效果，恢复原状。
请注意，这个示例在某些情况下可能会影响到用户体验，比如在实际网页中可能需要更精细的控制以避免干扰到其他交互逻辑。此外，不同浏览器对于选中文本和处理选区的API支持可能会有差异，可能需要进一步的兼容性测试和调整。
jQuery-HTML5-CSS3实现的文本框，jQuery选中文本高亮页面淡出，jQuery全页图像预览画廊，jQuery+CSS3复古下拉菜单Formbox，
jQuery选中文本高亮页面淡出(jQuery-HTML5-CSS3实现的文本框)由讯客互联资讯实事栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“jQuery选中文本高亮页面淡出(jQuery-HTML5-CSS3实现的文本框)”
