背景图像跟随鼠标光标答案

【问题标题】：Backgroundimage follow Mousecursor背景图像跟随鼠标光标
【发布时间】：2015-01-29 17:21:40
【问题描述】：

我想要这样的效果： http://www.thepetedesign.com/demos/interactive_bg_demo.html

背景图像应跟随鼠标光标。有没有一种简单的方法可以在不从示例中获取脚本的情况下做到这一点？

我已经尝试过这样的事情：

$('#outer').mousemove(function(e){
    var xwidth = e.pageX - this.offsetLeft;
    var ywidth = e.pageX - this.offsetRight;
  if (xwidth <= 1200) {
      $('#bg').css({'right': xwidth});           
  }

   if (ywidth >= 500) {
      $('#bg').css({'left': ywidth});           
  }

【问题讨论】：

标签： jquery css

【解决方案1】：

您发布的示例使用 CSS 变换矩阵来更改背景层的位置。图片必须居中，这样你就不能通过改变背景图片的左右位置来移动它。

您应该显示一个绝对位置的图层，该图层以边距覆盖屏幕，但 z-index 较低以用作背景。在鼠标移动层的位置与 css 变换属性。

var maxMove = 10;
var d = $(window);
var bg = $("#bg");
bg.width(d.width()+maxMove*2).height(d.height()+maxMove*2).css('top','-' + maxMove + 'px').css('left','-' + maxMove + 'px');

$(window).mouseleave(function(){
    //bg.css('transform','matrix(1, 0, 0, 1, 0, 0)');
});

$(document).mousemove(function(event) {
    var xPos = event.pageX;
    var yPos = event.pageY;

    var w = d.width();
    var h = d.height();

    var xShift = ((w/2 - xPos)/w*2)*maxMove;
    var yShift = ((h/2 - yPos)/h*2)*maxMove;

    $("#log").text(xShift);
    bg.css('transform','matrix(1, 0, 0, 1, ' + xShift + ', ' + yShift + ')');

});

当然不要忘记 CSS：

#bg{
    position:absolute;
    background:url(http://lorempixel.com/output/city-q-c-1861-1370-1.jpg) center center no-repeat;
    z-index:-1;
}
body{
    padding:0;
    margin:0;
    overflow:hidden;
}

查看detailed tutorial 并进行现场演示。

阅读 Css 变换矩阵here

【讨论】：

【解决方案2】：

通过在网络上搜索您想要实现的目标，第一个结果导致了这个页面： http://jsfiddle.net/geekambassador/a6ekn/

bg.mousemove(function(event) {
  var xPos = event.pageX;
  TweenLite.to(bg, .5, {css:{backgroundPosition:xPos + "px"}});
});

希望对你有帮助。

【讨论】：