根据窗口宽度移动图像

Question

我有一段时间让这个工作。

我有一个绝对定位的图像，右边：0，顶部：0到它的引脚到窗口的右边。

我需要的是，如果窗口调整大小（或当前处于某个宽度）以开始根据几个数字向右移动图像......

以下是我目前的尝试：

$(window).on('load', function(){
    var $ww = $(window).width();
    moveImage($ww);
});

$(window).smartresize(function(){
    var $ww = $(window).width();
    moveImage($ww);
});

function moveImage($w){
    if($w <= 1863){
        var $p1img = $('.panel-1-image');   
        $pos = 1410 - $w;
        $p1img.css('right', '-' + $pos + 'px');
    }
}

.panel-1-image是相关图片。

因此，图像和左侧内容的总宽度为1410像素。在大于1863像素的屏幕尺寸上看起来很好。

我想将图像进一步向右移动，如果屏幕尺寸较小，或者调整尺寸小于此尺寸，那么图像不会覆盖/覆盖其旁边的内容。

我正在使用jQuery 1.7和jQuery smartresize插件：http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

我做错了什么？

截图

完整

较小的

较小的

放大镜的边缘不应与内容重叠

小提琴

http://jsfiddle.net/o7thwd/YmQpt/

Answer 1

您可以使用

@media screen and (max-width: 1410px){
    //Add CSS here
}

只需添加新的CSS来调整图片大小，移动它，显示：无或您需要应用的任何类型的CSS以满足您的需求。

你不应该需要javascript，除非你想做一些CSS不能做的事情。

编辑：发布你的小提琴后，我相信这就是你要找的东西：FIDDLE

基本上，您只需将图像放在内容中并将样式设置为右：-360px;

最后不需要Jscript。希望这是你需要的。

编辑＃2：抓一点，它与其他内容重叠，让我看看能不能解决这个问题。

编辑＃3：现在应该可以做到这一点......因为我没有小提琴中的CSS，所以这是我所做的截图。

我从面板内容中删除了z-index

Answer 2

难道你不能只将宽度设置为某个百分比吗？

否则只需检查浏览器宽度并相应更改。 你有截图或jsfiddle来进一步明确你的意图吗？

为什么不使用jquery的resize（）？ （http://api.jquery.com/resize/）

Answer 3

如果你想坚持你的方法，问题是函数moveImage中的语法。你缺少大括号并使用昏迷而不是分号。

更改行：

$p1img.css('right', '-' + $pos + 'px');

到此：

$p1img.css({'right':'-' + $pos + 'px'});

它应该有用。

Answer 4

从您的问题和评论中可以看出，您的图片位于相对定位的html元素中。在这种情况下，您的图像将绝对定位到其父级（相对对象）。关于CSS Tricks的This帖子解释得很好。您需要做的就是将图像移到容器外面，它应该可以工作。

（我会将此作为评论发布给@ snaplemouton的答案，但我还没有代表。）

Answer 5

根据您在函数中提供的数学计算。

function moveImage($w){
  if($w <= 1863){
    var $p1img = $('.panel-1-image');   
    $pos = 1410 - $w;
    $p1img.css('right', '-' + $pos + 'px');
  }
}

您正在查看内容大小（包括图片和浏览器）的差异。 您需要检测的是图像看起来好的宽度和浏览器大小。 这样，对于浏览器所拥有的每个像素，通常看起来都不错，它会将图像移动到那么多像素上。

此功能可以使用：

function moveImage($w){
  if($w <= 1863){
    var $p1img = $('.panel-1-image');   
    $pos = 1864 - $w;
    $p1img.css('right', '-' + $pos + 'px');
  }
}

Answer 6

@snaplemouton的解决方案是最好的解决方案。

使用您的Javascript会导致问题，您的浏览器及其内容会不时地调整大小等等。并且您使用了太多不必要的流程。

它不是语义的，也不是完全响应的，因为不同的浏览器会以不同方式检测像素。 因此，为什么在某些浏览器上，您的图像可能不会与文本重叠，而其他浏览器则会重叠。

请看一下这篇文章：http://css-tricks.com/css-media-queries/

媒体查询允许您根据浏览器的大小，甚至媒体类型（如移动设备等）轻松更改内容的CSS。

正如上面提到的snaplemouton：

@media screen and (max-width: 1410px){
    .panel-image-1{
        width: 50%;
        height: 50%;
    }
}

基本上说，如果屏幕小于1410像素，请更改我的侦探图像＆＃39;宽度为50％，高度为50％。

此外，您的图片不应该是图片代码。 如果您严格使用图片进行设计，这对内容没有任何价值，您应该通过css而不是html包含它。

Answer 7

选项一：

body{
position:relative;
}
img{position:absolute;right:0px;bottom:0px;}

现在只需控制窗口（正文），图像就会跟随

选项二：

body{background-image:[your image]; background-position:90% 90%; background-size:10% 10%;}

您需要再次根据需要控制窗口/身体位置。并根据您希望图像的大小更改百分比。