Question

我希望有这样的效果： 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});           
  }

Answer 1

只需在网上搜索您想要实现的目标，第一个结果就会显示在此页面上： http://jsfiddle.net/geekambassador/a6ekn/

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

希望它有所帮助。

Answer 2

您发布的示例使用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 Transforms Matrix here

背景图像跟随鼠标光标

2 个答案: