Показать сообщение отдельно
  #29 (permalink)  
Старый 08.08.2015, 19:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Иван Федорович,
танец с бубнами ... незнаю поможет ли он вам.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 <title>video</title>

<style>
body{
    height: 3000px;
}

.video {
    position: fixed;
    left: 100px;
    top: 10px;
    width: 400px;
    height: 250px;
    border: 1px solid green;
    background-image: url("http://360tv.ru/binfiles/images/20150424/ba10f44c.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
</style>
<script>
   var images = ["http://360tv.ru/binfiles/images/20150424/ba10f44c.jpg","http://www.wallsbox.ru/images/original/dozhd-[1680x1050]-[3877171].jpg", "http://moimiri.ru/wp-content/gallery/2013year/2013_Sirost_90x80.jpg", "http://st.magazin-almaz-servis.ru/12/1531/460/syrost-v-kvartire-kak-izbavitsya-foto-2.jpg", "http://cs7002.vk.me/c7007/v7007062/8820/Snd9Gm9pv5k.jpg"],
   len = images.length;
   for (var i=0; i<len; i++)  {
      var img = new Image();
          img.src = images[i]
    } ;
window.onload = function() {
    var videoElem = document.querySelector('.video'),
    scrollHeight = document.documentElement.scrollHeight,
    clientHeight = document.documentElement.clientHeight,
    maxScroll = Math.max(scrollHeight, clientHeight) - clientHeight,
    step = maxScroll/len;


window.onscroll = function(){
    var scrolled = window.pageYOffset || document.documentElement.scrollTop;
    for (var i=0; i < len; i++)  {
      if (i * step + step >= scrolled) break
    }
    videoElem.style.backgroundImage = "url("+images[i]+")";
    }
}

</script>
</head>
<body>
<div class="video"></div>
</body>
</html>
Ответить с цитированием