Question

你好需要一些帮助在单个容器div内水平堆叠多个div标签。每个都有自己的可滚动BKG图像。附带一些简单CSS的代码非常适合1st div。问题是我不能让右边的其他div正确移动。 BKG图像移出屏幕并全部移动。 CSS使用内联块。 Divs很好地堆叠，随着浏览器大小的变化而移动。

$(".download_content_02").mousemove(function( event ) {

var containerWidth = $(this).innerWidth(),
    containerHeight = $(this).innerHeight(),
    mousePositionX = (event.pageX / containerWidth) * 100,
    mousePositionY = (event.pageY /containerHeight) * 100;

$(this).css('background-position', mousePositionX + '%' + ' ' + mousePositionY + '%');

});

Answer 1

这是因为鼠标事件属性pageX和pageY是从整个页面的边缘计算出来的。您需要减少div.download_content_02

的偏移量

$(".download_content_02").mousemove(function(event) {
  var containerWidth = $(this).innerWidth(),
    containerHeight = $(this).innerHeight(),
    containerOffsetLeft = $(this).offset().left, // container left offset
    containerOffsetTop = $(this).offset().top, // container top offset
    mousePositionX = ((event.pageX - containerOffsetLeft) / containerWidth) * 100,
    mousePositionY = ((event.pageY - containerOffsetTop) / containerHeight) * 100;

  $(this).css('background-position', mousePositionX + '%' + ' ' + mousePositionY + '%');

})

这是jsfiddle link。

希望这就是你所需要的。

<强>更新

添加mouseleave事件侦听器以重置背景图像位置。

使用鼠标-CSS和JS移动背景图像 - 多个水平堆叠DIV

1 个答案: