Question

我正在尝试复制一些我喜欢的小项目功能。

以下是项目：https://en.playkot.com/

我已经使用以下代码管理鼠标移动背景：

$(document).ready(function() {
    var movementStrength = 25;
    var height = movementStrength / $(window).height();
    var width = movementStrength / $(window).width();
    $("#top-image").mousemove(function(e){
        var pageX = e.pageX - ($(window).width() / 2);
        var pageY = e.pageY - ($(window).height() / 2);
        var newvalueX = width * pageX * -1 - 25;
        var newvalueY = height * pageY * -1 - 50;
        $('#top-image').css("background-position", newvalueX+"px     "+newvalueY+"px");

    });
});

我还希望文本能够移动鼠标。

如果我可以使用任何库，我只是徘徊，以获得与上述示例相同的效果？

我的项目可在此处查看：http://super-code.co.uk/test.php

Answer 1

你指的是哪个文字.. ??我无法看到任何文字....文字＆＃34; PLAYKOT＆＃34;嵌入IMG .. 你可以试试这个恐龙移动代码......

$('#dinosaur').on('mouseenter', function() {
  $(this).find('img').css('left', '50px');
}).on('mouseleave', function() {
  $(this).find('img').css('left', '0px');
});

Answer 2

$("#top-image").mousemove(function(e){
      var pageX = e.pageX - ($(window).width() / 2);
      var pageY = e.pageY - ($(window).height() / 2);
      var newvalueX = width * pageX * -1 - 25;
      var newvalueY = height * pageY * -1 - 50;
      $('#top-image').css("background-position", newvalueX+"px     "+newvalueY+"px");

      $(".pa" ).css("transform","translate("+ newvalueX+"px ," +newvalueY+"px)");

    });

添加最后一行将有效...

jQuery视差移动背景与文本

2 个答案: