使用javascript替换悬停时的文本

replacing text on hover using javascript?

本文关键字：文本 悬停 javascript 替换 使用      更新时间：2023-09-26

这是我的小提琴演示。

悬停时是否有任何javascript代码可以不断更改"Z"？

例如，当我悬停在Z上时，它消失了，E从右边开始，E从左边消失，p从右边开始。类似地，这个过程继续形成单词Zephyr。

以及当用户将指针移开时。它应该回到Z。

.initials {
    position:absolute;
    background:{color:main color};
    background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
    color:white;
    margin-top:20px;
    padding-top:20px;
    padding-bottom:20px;
    width:60px;
    text-align:center;
    margin-left:20px;
    font-size:20px;
    letter-spacing:5px;
    box-shadow:0px 2px 3px rgba(0,0,0,.15)
}

查看下面的代码。希望这对你有帮助。要提高/降低动画的速度，请将animate函数的第三个参数更改为您的时间。此处时间为ms。

$('.initials').mouseenter(function(){
    for(var i=0; i<5; i++){
        $('.letter:first').delay(500).animate({
                        marginLeft: '-=' + '70'
                    }, 300);
    }    
});
$('.initials').mouseleave(function(){ 
   $('.letter:first').animate({
                    marginLeft: '0'
                }, 1500);    
});
.initials {
    position:absolute;
    background:{color:main color};
    background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
    color:white;
    padding-top:20px;
    padding-bottom:20px;
    width:60px;
    text-align:center;    
    font-size:20px;
    letter-spacing:5px;
    box-shadow:0px 2px 3px rgba(0,0,0,.15);
    overflow: hidden;
    white-space: nowrap;
}
.letter{
    width:60px; 
    display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="initials">
     <div class="letter">Z</div>
     <div class="letter">e</div>
     <div class="letter">p</div>
     <div class="letter">h</div>
     <div class="letter">y</div>
     <div class="letter">r</div>
</div>

JS Fiddle：http://jsfiddle.net/63utadgw/16/

使用CSS动画是可能的。你可以看到这个如何使用CSS动画移动文本？。

无需使用JavaScript

相关文章：