本文介绍了一种使用JavaScript和CSS实现的动态文本高亮显示效果。当用户选中文档中的文本并点击特定按钮时，所选文本将启动颜色变化动画。此方法利用了window.getSelection()方法来获取当前选中的文本节点，并通过jQuery为这些节点添加动画。
当您单击虚拟按钮，然后选择不见了。你需要这种方式绑定到mousedown事件：
function addAnimation() {
selectedElement = window.getSelection().focusNode.parentNode;
$(selectedElement).addClass('grad');
}
$('.animate-selected').on('mousedown', addAnimation);
.text-field {
background: #333;
color: #fff;
width: 300px;
height: 100px;
}
.grad {
-webkit-animation: changeColor 8s ease-in infinite;
animation: changeColor 8s ease-in infinite;
}
.animate-selected{
margin: 2px 0;
border: 1px solid blue;
display: inline-block;
padding: 0 4px;
cursor: pointer;
}
@-webkit-keyframes changeColor {
0% {
color: #ff7473;
}
25% {
color: #ffc952;
}
50% {
color: #fc913a
}
75% {
color: #75D701;
}
100% {
color: #ff7473
}
}
Hello world. Select this text and press the button
Animate
如果你想动画只选定的文本，比你做这种方式：
function addAnimation() {
$('.grad').contents().unwrap(); /* this removes previous animation */
var selectedText = window.getSelection();
var container = $(selectedText.anchorNode.parentNode);
var wrappedText = '' + selectedText + ''
container.html(container.html().replace(selectedText, wrappedText));
}
$('.animate-selected').on('mousedown', function(e) {
addAnimation();
});
.text-field {
background: #333;
color: #fff;
width: 300px;
height: 100px;
}
.grad {
-webkit-animation: changeColor 8s ease-in infinite;
animation: changeColor 8s ease-in infinite;
}
.animate-selected{
margin: 2px 0;
border: 1px solid blue;
display: inline-block;
padding: 0 4px;
cursor: pointer;
}
@-webkit-keyframes changeColor {
0% {
color: #ff7473;
}
25% {
color: #ffc952;
}
50% {
color: #fc913a
}
75% {
color: #75D701;
}
100% {
color: #ff7473
}
}
Hello world. Select this text and press the button
Animate
扫一扫
3201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
