图像移动与鼠标位置 - 盒问题？ [英] Image move with mouse position - box issue?

问题描述

我原本从这里收集了一些信息并对其进行了扩展：onextrapixel.com/examples/interactive-background/index4.html

我已将图片合并到图片中在页面上移动鼠标的位置，但是看起来有一个问题，那就是存在一个顶部的盒子，它会切断一些徘徊的图像。您可以在示例页面上看到它的实际效果此处

我的css：

  .top-image {
 background：url（'http： //i.imgur.com/wZRaMrB.png'）; 
位置：绝对; 
 top：400px; 
宽度：100％; 
 z-index：0; 
身高：100％; 
背景重复：不重复; 
 
 $ / code> 

我的js：



  $（document）.ready（function（）{
 var movementStrength = 25; 
 var height = movementStrength / $（window）.height（）; 
 var width = movementStrength / $（window）.width（）; 
 $（body）。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）; 
}）; 
}）; 
  

我也希望在页面的右侧重复此操作。

在这里的评论中提出一些建议是：jsfiddle https：/ /jsfiddle.net/yx1w8ysr/#&togetherjs=D4Q1xTfcaO

解决方案

如果您事先知道图片的大小，您可以固定设置div的大小，不需要使用 background-size：包含。而应将其设置为某个相对值（小于100％），以便为背景图像的移动提供填充。但是，如果您不知道图像的大小，应该使用 background-size：contains 来确保图像位于div容器内。但是，采用这种方法我们无法控制图像的大小。这意味着您不能使用 background-position 来移动图像（因为尺寸符合其父项，移动会导致图像被切断）。

所以你需要一些另外的包装器/容器并移动你的内部div（ .top-image ），而不是改变背景位置。

以下是详细的代码：

var movementStrength = 25; var w = $（window）.width（）; var h = $（window）.height （）; $（window）.mousemove（function（e）{var pageX =（e.pageX -w / 2）/ w / 2; var pageY =（e.pageY - h / 2）/ h / 2; var newvalueX = pageX * movementStrength; var newvalueY = pageY * movementStrength; $（'。top-image'）.css（{left：newvalueX +'px'，top：newvalueY +'px'}）;}）;

.container {padding：25px;宽度：35％;身高：35％;位置：绝对; top：400px;}。top-image {background：url（'http://i.imgur.com/wZRaMrB.png'）;位置：绝对; background-size：包含;宽度：100％; z-index：0;身高：100％; background-repeat：no-repeat;}

<脚本src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class ='container'> < div class =top-image>< / div>< / div>

$ b

I had originally taken some information from here and expanded on it: onextrapixel.com/examples/interactive-background/index4.html

I have instead incorporated the image to move with mouse position on the page, however there seems to be an issue with there being a top "box" that cuts off some of the hovered image. You can see it in action on a sample page here

My css:

.top-image {
    background:url('http://i.imgur.com/wZRaMrB.png');
    position:absolute ;
    top:400px;
    width:100%;
    z-index:0;
   height:100%;
   background-repeat: no-repeat;
}

My js:

$(document).ready(function() {
    var movementStrength = 25;
    var height = movementStrength / $(window).height();
    var width = movementStrength / $(window).width();
    $("body").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");
});
});

I also hope to repeat this for the right side of the page.

After some suggesting in the comments here is the jsfiddle https://jsfiddle.net/yx1w8ysr/#&togetherjs=D4Q1xTfcaO

解决方案

If you know the image's size beforehand, you can set the size of your div fixedly and don't need to use background-size:contain. Instead set it to some relative value (less than 100%) so that you have a padding around for the movement of the background image. However if you don't know the size of the image, you should use background-size:contain to ensure that your image sits right inside your div container. However with this approach we cannot control the size of the image anymore. That means you cannot use background-position to move the image around (because the size fits its parent, moving will cause the image be cut off).

So you need some another wrapper/container and move your inner div (.top-image) instead of changing the background-position.

Here is the detailed code:

var movementStrength = 25;
var w = $(window).width();
var h = $(window).height();

$(window).mousemove(function(e) {
  var pageX = (e.pageX - w / 2) / w / 2;
  var pageY = (e.pageY - h / 2) / h / 2;
  var newvalueX = pageX * movementStrength;
  var newvalueY = pageY * movementStrength;
  $('.top-image').css({
    left: newvalueX + 'px',
    top: newvalueY + 'px'
  });
});

.container {
  padding: 25px;
  width: 35%;
  height: 35%;
  position: absolute;
  top: 400px;
}

.top-image {
  background: url('http://i.imgur.com/wZRaMrB.png');
  position: absolute;
  background-size: contain;
  width: 100%;
  z-index: 0;
  height: 100%;
  background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class="top-image"></div>
</div>

这篇关于图像移动与鼠标位置 - 盒问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！