Javascript 基于鼠标移动移动div的每个字符

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

我有一个

div

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

以下是我到目前为止所做的：

HTML:

你好，世界

Javascript:

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

var chars=$（“.div1”）.html（）.split（“”）；
$（“.div1”）.empty（）；
对于（变量i=0；i

---

---

有人能帮我达到这个效果吗？我不知道如何进行，也没有网站或答案可以帮助我。您可以使用jQuery或纯JavaScript，但请保持简单谢谢。

哦，我们开始吧，我找到了解决这个问题的办法

我所做的是为每个字符使用不同的类名（

.letter

+字符编号），然后根据鼠标位置和与每个字符的比较距离创建一种移动字符的方法，例如，当鼠标与字符之间的距离小于X时，并且鼠标

Y

小于字符

Y

，则字符将向下移动

感谢和

以下是相关代码：

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;
}

var chars=$（“.div1”）.html（）.split（“”）；
$（“.div1”）.empty（）；
对于（变量i=0；i6 | |距离<-6）{
如果（x<$（“.letter”+i）.offset（）.左）{
$（“.letter”+i）.css({
“左”：+（24/Math.abs（distx）*Math.abs（distx）），
“位置”：“相对”
});
}否则{
$（“.letter”+i）.css({
“左”：-（24/Math.abs（distx）*Math.abs（distx）），
“位置”：“相对”
});
}
}
如果（距离>12 | |距离<-12）{
如果（y<$（“.letter”+i）.offset（）.top+6）{
$（“.letter”+i）.css({
“top”：+（24/Math.abs（disty）*Math.abs（disty）），
“位置”：“相对”
});
}否则{
$（“.letter”+i）.css({
“顶部”：-（24/Math.abs（disty）*Math.abs（disty）），
“位置”：“相对”
});
}
}
}
distx=0；
disty=0；
}

}))

HTML:

你好，世界

---

既然你说你想学习，我会给你一个代码来帮助你，但你必须自己完成，我没有测试它，我只是盲目地写了它，所以它可能不起作用，但可能会让你知道必须做什么

Html:

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');

letterscatter=（函数（）{
功能字母散射器（id）{
this.id=id
this.$el=$（“#”+this.id）；
this.rangeOfaction=3；//要影响的字符数
this.maxVerticalMovement=10；//px中的值
此.minVerticalMovement=2
this.duration=100；//以毫秒为单位
//事件侦听器
this.$el.on（mousemove（（函数）（\u this）{
返回函数（e）{
var x=e.pageX；
var y=e.pageY；
返回_this.scatter（x，y）；
}
})(本);；
}
letterscatter.prototype.splitCharacters=函数（）{
var节点=[]；
var-nodesQ=0；
var_this=这个；
this.chars=$el.text（）.split（“”）；
$el.empty（）；
对于（变量i=0；i如果（x）计算角度和距离，并将其应用于字符*几何体*但如果所有字符都具有相同的类别，如何独立地应用每个字符的角度和距离？为每个字符应用不同的CSS值them@TiagoMarinho-我不认为这是做这件事的方法，但这取决于你在尝试什么ng要做什么？也许从更接近这个的东西开始->@永远我想学习！哦，很好，你找到了一种方法；），也许你可以把它变成一个js“类”，以便更好地组织它以便进一步使用=）非常感谢您的帮助，但是由于您的代码需要更多的HTML标记、更多的JavaScript行，并且没有经过测试，我认为我的解决方案更好（我已经在这里回答了我的解决方案，您可以看到，如果向下滚动，但我不能在不到2天的时间内将其视为正确）。无论如何，我非常感谢所有帮助过我的人。欢迎您，您可以改进此代码以使用相同的标记amount，它有更多的javascript，但可能只是有更多的结构。但是您的代码已经可以工作了，所以不需要动脑筋：P，祝您的项目好运；）
<div class="div1">Hello World</div>

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

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

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');