Question

我正在开发一个网站，但我不知道如何创建一个如下所示的javascript动画：

我有一个div，上面有一些文字，当用户将鼠标移到这个文本上时，我希望每个角色彼此独立移动，以便与它保持一定距离（鼠标）。此外，我希望这个动画有旋转，但现在它并不重要。这是一个图像说明：

explanation

这是我到目前为止所做的事情：

HTML：

<div class="div1">Hello World</div>

使用Javascript：

var chars = $(".div1").html().split('');
$(".div1").empty();
for(var i = 0; i < chars.length; i++){
    $(".div1").append("<span class='letter'>"+chars[i]+"</span>");
}

JSFiddle

有人能帮我实现这个效果吗？我不知道如何继续，没有帮助我的网站或答案。你可以使用jQuery或纯JavaScript，但请保持简单！谢谢。

Answer 1

哦，我们走了，我找到了解决方案。

我所做的是为每个字符（.letter +字符编号）使用不同的类名，然后创建一种根据鼠标位置和距离与每个字符相比移动字符的方法，例如，，当鼠标与角色之间的距离小于X，并且鼠标Y小于角色Y时，角色将会下降。

感谢adeneo和Derek

以下是相关代码：

JavaScript的：

var chars = $(".div1").html().split('');
$(".div1").empty();
for (var i = 0; i < chars.length; i++) {
    $(".div1").append("<span class='letter" + i + "'>" + chars[i] + "</span>");
    $(".letter" + i).css({
        "position":"relative",
    });
    $(".letter" + i).css({
        "transition": "0.5s"
    });
}

$(document).on("mousemove", function (e) {
    for (var i = 0; i < chars.length; i++) {
        var x = e.pageX,
            y = e.pageY;
        var distx = x - $(".letter" + i).offset().left + ($(".letter" + i).width() / 2);
        var disty = y - $(".letter" + i).offset().top;

    if (Math.abs(distx) < 24 && Math.abs(disty) < 24) {
        if (distx > 6 || distx < -6) {
            if (x < $(".letter" + i).offset().left) {
                $(".letter" + i).css({
                    "left": + (24 / Math.abs(distx) * Math.abs(distx)),
                        "position": "relative"
                });
            } else {
                $(".letter" + i).css({
                    "left": - (24 / Math.abs(distx) * Math.abs(distx)),
                        "position": "relative"
                });
            }
        }

        if (disty > 12 || disty < -12) {
            if (y < $(".letter" + i).offset().top + 6) {
                $(".letter" + i).css({
                    "top": + (24 / Math.abs(disty) * Math.abs(disty)),
                        "position": "relative"
                });
            } else {
                $(".letter" + i).css({
                    "top":  - (24 / Math.abs(disty) * Math.abs(disty)),
                        "position": "relative"
                });
            }
        }
    }
    distx = 0;
    disty = 0;
}

}）;

HTML：

<div class="div1">Hello World</div>

Updated JSFiddle with CSS Transitions to improve smoothness

Answer 2

好吧，既然你说你想学习，我会给你一个代码来帮助你，但是你必须按照你的方式努力，我还没有测试它，我只是盲目地写它所以它可能会赢得工作，但可能会让你对必须做的事情有所了解。

HTML：

<div class="container">
    <div id="coolDiv" class="scatterContainer">Hello World</div>
</div>

的CSS：

*{margin:0;}
span:hover{
    color:#0CF;
}
.scatterContainer{
    display: inline;
}
.container {
    margin: 30px auto;
}

的Javascript

LetterScatterer = (function() {

  function LetterScatterer(id) {

    this.id = id
    this.$el = $('#' + this.id);
    this.rangeOfaction = 3; // Number of characters to affect
    this.maxVerticalMovement = 10; // Value in px
    this.minVerticalMovement = 2
    this.duration = 100; // In miliseconds



    // Event Listeners

    this.$el.on(mousemove((function(_this){

        return function(e){

            var x = e.pageX;
            var y = e.pageY;

            return _this.scatter(x, y);
        }

    })(this));

  }

  LetterScatterer.prototype.splitCharacters = function() {
    var nodes = [];
    var nodesQ = 0;
    var _this = this;
    this.chars = $el.text().split('');
    $el.empty();


    for(var i = 0; i < chars.length; i++){
        var markup = "<span class='letter'>"+chars[i]+"</span>";
        nodes.push(markup);
    }

    this.$nodes = $(nodes);

    this.nodesWidth = [];
    this.$nodes.each(function(){
        var width = $(this).outerWidth();
        _this.nodesWidth.push(width);
    });

    $el.append(this.$nodes);


  }

  LetterScatterer.prototype.scatter = function(x, y) {
    var epicenter;
    var offset = 0;
    var midPoint, farestLeft;

    for(var i = 0, len = this.nodesWidth.length; i < len; i++){
        offset += this.nodesWidth[i];
        if(x <= offset){
            epicenter = i;
            break;
        }
    }

    leftRange = (this.rangeOfaction - 1) / 2; // We remove one, this is our epicenter, then we get left and right halves


    farestLeft = epicenter - leftRange;
    for(var i = farestLeft; i < this.rangeOfaction; i++){
        this.animateY($node[i]);
    }


  }


  LetterScatterer.prototype.animateY = function(node, verticalDisplacement) {
    var $node = $(node);
    $node.animate({margin-top: verticalDisplacement + 'px'}, this.duration);
  }



  return LetterScatterer;

})();

letterScatterer = new LetterScatterer('coolDiv');

你在代码中看到的是一个类类函数，首先你传递包含将被分散的文本的元素的id。有一些配置变量，行动范围可以说，如果你鼠标悬停在一个字符上，左边和右边有多少个字符（也包括当前悬停元素）应该是动画的，最大和最小的verticalMovement，决定了如何应该移动那个悬停的（最大），而那些更远的移动将使用min，中间的那些应该插入，但我没有编码那么远。

然后我们得到了一个mousemove监听器，它调用方法分散，这个方法通过将每个字符加起来找到当前悬停的项目，但是现在我想一想，只是添加一个监听器到跨度应该更容易，并使用jQuery方法index（）获取该元素的当前索引，然后根据该索引为该元素设置动画，并为该范围内的元素设置动画。如果你愿意，你必须创建计算旋转和x移动的代码，但我认为我给了你很多东西，我花了一段时间来编码它，所以我希望它有所帮助，这个答案满足你的问题。：）

根据鼠标移动移动div的每个字符

2 个答案: