Question

这是我的fiddle演示。

是否有任何javascript代码可以不断更改＆＃39; Z＆＃39;什么时候悬停？

例如。当我将鼠标悬停在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)
}

Answer 1

可以使用CSS Animation。您可以看到此How to move text using CSS animation?。

无需使用JavaScript

Answer 2

请看下面的代码。希望这会帮助你。要增加/减少动画的速度，请将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小提琴：http://jsfiddle.net/63utadgw/16/

使用javascript替换悬停时的文字？

2 个答案: