jquery background image styling

У меня возникли проблемы с укладкой фонового изображения, которое я использую jQuery для циклического запуска источника. Изображение вставляется в css в качестве фона и растягивается, чтобы покрыть все окно. Вот мой css:jquery background image styling

html { 
    background: url(images/image_1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Перед добавлением jQuery swapper изображение выглядит так, как предполагалось. Однако, когда я добавляю swapper, стилизация css терпит неудачу. Эффекты обложки, кажется, падают, и у меня остается изображение фиксированного размера. Однако обмен работает отлично. Я бы подумал, что jQuery css добавит к css, но это почти так, как будто это переопределяет все свойства элемента html и просто оставляет меня источником фона, но не покрывает. Вот что мой HTML и Javascript выглядеть следующим образом:

<html> 

<head> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 

<script language="javascript"> 
<!-- 
    var ctr = 0; 

    $(document).ready(function() { 
     nextBg(); 
    }); 

    function nextBg() 
    { 
     ++ctr; 

     if(ctr <= 3) 
     { 
      $("html").css("background", "url(images/repurpose2/image_" + ctr + ".jpg) no-repeat center center fixed"); 
      if(ctr == 3) 
       ctr = 0; 
     } 
    } 
//--> 
</script> 

<link rel="stylesheet" type="text/css" href=style.css> 

</head> 

<body> 

    <div class="image-swapper"> 
     <a href="#" onclick="nextBg();" />Next</a> 
    </div> 

</body> 

</html>

Я использую фоновое изображение подкачку подход я нашел здесь: Loop thru 100 background-images onClick

Может кто-нибудь сказать мне, почему я не стилизовать свой HTML со стилем .css-файл?

Большое спасибо!

источник

2013-09-15 user2781900

скрипку пожалуйста? или ссылку? –

У вас есть ошибки в вашей консоли Javascript? Еще лучше, можете ли вы сделать скрипку, показывающую это поведение? –

Спасибо вам, что нашли время ответить. Я просто связывал связь, когда заметил ответы ниже, которые решили проблему. Я ценю вашу помощь! – user2781900

Возможно, вы попираете все свойства background, чтобы обновить URL-адрес. background как border и margin - это сокращенное правило для объединения различных конкретных правил и его вообще не нужно использовать, и в этом случае его следует избегать, так как вы только хотите обновить одно из более конкретных правил: background-image.

Просто поменять:

$("html").css("background", "url(images/repurpose2/image_" + ctr + ".jpg) no-repeat center center fixed");

$("html").css("background-image", "url(images/repurpose2/image_" + ctr + ".jpg)");

источник

2013-09-15 20:02:39 Anthony

Ничего себе. Потрясающие. Так оно и было. Большое спасибо, Энтони! – user2781900

Ницца! У меня есть моргнув на мух весь день, не хватает какой-то причуды в библиотеке. Хорошая анимация, кстати. – Anthony

Анимация? Я закончил ставить страницу вместе - вот что получилось - http://www.seanoneill.us/test/project-repurpose.html. У меня очень мало информации о том, что я делаю - просто изучая весь этот материал html/css/jsish в первый раз, прикладывая этот маленький портфель портфолио к совместной работе, так что это довольно любитель. Супер подтолкнул к работе javascript. Еще раз спасибо. – user2781900

<script language="javascript"> 
    var ctr = 0; 

    $(document).ready(function() { 
     nextBg(); 
    }); 

    function nextBg() 
    { 
     ++ctr; 
     if(ctr <= 3) 
     { 
      imageUrl = "images/repurpose2/image_" + ctr + ".jpg"; 
      $('html').css('background-image', 'url("' + imageUrl + '")'); 
      $('html').css('background-repeat', 'no-repeat'); 
      $('html').css('background-position', 'center'); 
      $('html').css('background-attachment', 'fixed'); 
      if(ctr == 3) 
      { 
       ctr = 0; 
      } 

     } 
    } 
</script>

источник

2013-09-15 19:57:29

Эй, Анкит. Спасибо, что нашли время, чтобы предложить это. Приведенное ниже предложение предоставило instafix с переключателем «background-image». Я должен признать, что я действительно не знаю, что я делаю - делает то, что у вас здесь, улучшает метод, который я использовал + исправление ниже? Еще раз спасибо! – user2781900

jquery background image styling

ответ

Смежные вопросы