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 - 根據瀏覽器窗口的大小移動圖像

回答

相關問題