JavaScript - 根据浏览器窗口的大小移动图像

我正在尝试使用jQuery循环来旋转页面上的一些图像。图像宽度为1400px，这意味着对于屏幕分辨率较小的用户来说，图像的右侧会消失。JavaScript - 根据浏览器窗口的大小移动图像

我想让图像在图像的任意一边都有相同的数量，因此图像的中心位于观察窗口的中心。

如果你看看http://renegadeox.com/并调整浏览器窗口大小，你会明白我的意思。

如何使用javascript将图像相对于容器左移并保持图像居中？

下面是完整的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
</head> 
<body> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('.slideshowWrap').cycle({ 
      fx: 'fade', // http://malsup.com/jquery/cycle/ Background rotater 
     }); 
    }); 
    </script> 
    <div style="margin: 0 auto" class="slideshowWrap"> 
     <div class="homeslideshow"> 
      <img src="background_01.jpg" alt="" />  
     </div> 
     <div class="homeslideshow"> 
      <img src="background_02.jpg" alt="" />  
     </div> 
     <div class="homeslideshow"> 
      <img src="background_03.jpg" alt="" />  
     </div> 
    </div> 
</body> 
</html>

来源

2013-09-25 Zaphod Beeblebrox

您可以使用自定义转换从周期插件，定义自己的方法，来计算正确的左值，你可以使用此代码

编辑

我试过这段代码，它的工作原理，但是这只适用于加载事件，它不能在调整大小，你可能会得到所需的效果，如果你绑定整个函数调整大小e发泄

你还必须加点CSS：

<style> 
.slideshowWrap{ 
    width:100% !important; 
    overflow:hidden; 
} 
</style>

这是为我工作的JS：

$(document).ready(function() { 
var leftVal = 0; 
    if($(window).width()<1400){ 
     leftVal = ((1400 - $(window).width())/2)*-1; 
    } 

    $('.slideshowWrap').cycle({ 
     fx:  'custom', 
     cssBefore: { 
      left: leftVal, 
      top: 0, 
      opacity: 1, 
    display: 'block' 
     }, 
     animOut: { 
      opacity: 0 
     }, 
     animIn: { 
      left: leftVal, 
      top: 0, 
     }, 
     cssAfter: { 
      zIndex: 0 
     }, 
    cssFirst: { 
    left: leftVal 
    }, 
     delay: -3000 
    }); 
}); 
</script>

我相信上面的代码会给你想要的效果，如果不是至少有一个如何完成这个想法，希望它有帮助！这里是一个链接到周期自定义fx的完整文档http://jquery.malsup.com/cycle/adv.html

来源

2013-09-25 20:50:19 javiercf

嘿javiercf - 感谢输入。我已经放弃了它，但我无法完成它的工作。我并不是很了解JavaScript，但我明白这里会发生什么，但不幸的是，第一张图片淡出，然后没有任何内容。加上第一张图片并没有居中在页面中间的第一位：（ –

我刚刚编辑了代码，你在哪里，没有工作，新的代码搞错了！ – javiercf

你是个怪人天才男人！呜呼!!它的工作！非常感谢你。:) –

你需要有图像，你可以使用背景图片吗？为什么不使用css？

它会响应，但如果你想让插件调整大小，因为用户改变浏览器的大小 - 它将需要更新窗口大小调整事件。

否则，如果有人用低分辨率screeen打开页面，滑块将永远是其屏幕的100％，并且图像将居中（和“裁剪”）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
    <style type="text/css"> 
     .slideshowWrap { 
      width: 100%; 
      height: 500px; 
     } 
     .homeslideshow { 
      height: 100%; 
      width: 100%; 
     } 
     .slide1 { 
      background: url(background_01.jpg) no-repeat 50% 50%; 
     } 
     .slide2 { 
      background: url(background_02.jpg) no-repeat 50% 50%; 
     } 
     .slide3 { 
      background: url(background_03.jpg) no-repeat 50% 50%; 
     } 
     .homeslideshow img { display: none; } 
    </style> 
</head> 
<body> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.slideshowWrap').cycle({ 
       fx: 'fade', 
       slideResize: 0 
      }); 
     }); 
    </script> 
    <div style="margin: 0 auto" class="slideshowWrap"> 
     <div class="homeslideshow slide1"> 
      <img src="background_01.jpg" alt="" />  
     </div> 
     <div class="homeslideshow slide2"> 
      <img src="background_02.jpg" alt="" />  
     </div> 
     <div class="homeslideshow slide3"> 
      <img src="background_03.jpg" alt="" />  
     </div> 
    </div> 
</body> 
</html>

来源

2013-09-25 22:11:09 kasperoo

感谢您的建议，但我已经尝试了您的代码 - http://renegadeox.com/kasperoo.php - 它使图像向右移动。我不认为我明白要发生什么。我错过了什么？ –

如果您有一个小屏幕并打开刚刚链接的页面，您将看到图像将位于滑块内部。但是，如果您调整浏览器大小，则必须更新插件，因为它不会响应。 – kasperoo

对不起，另一条评论 - 我已将{slideResize：0}选项添加到我的答案中，从而使其全部响应并希望您在寻找什么。 – kasperoo

JavaScript - 根据浏览器窗口的大小移动图像

回答

相关问题