Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 14.03.2017, 23:25
Аватар для Paguo-86PK
Профессор
Отправить личное сообщение для Paguo-86PK Посмотреть профиль Найти все сообщения от Paguo-86PK
 
Регистрация: 16.09.2009
Сообщений: 253

Сообщение от e-partner Посмотреть сообщение
Спасибо, Paduo...
Нa моей аватарке достаточно информации о корректности чтения моего ника
P.S.: Чем и оправдывается сложность анимации в ней…
P.P.S.: И является тестом: Являетесь ли Вы читателем самого популярного журнала и компьютера нашего поколения…

Последний раз редактировалось Paguo-86PK, 14.03.2017 в 23:36.
Ответить с цитированием
  #12 (permalink)  
Старый 15.03.2017, 08:42
Новичок на форуме
Отправить личное сообщение для e-partner Посмотреть профиль Найти все сообщения от e-partner
 
Регистрация: 14.03.2017
Сообщений: 5

Сообщение от Paguo-86PK Посмотреть сообщение
Нa моей аватарке достаточно информации о корректности чтения моего ника
P.S.: Чем и оправдывается сложность анимации в ней…
P.P.S.: И является тестом: Являетесь ли Вы читателем самого популярного журнала и компьютера нашего поколения…
Простите, Paguo-86PK, что не до конца написал ваш сложный ник. Я исправился!

P.S. Плавную смену картинок - другим на заметку - я додумался сам как сделать: беру дополнительный див, приклепляю к нему фон. А второй див сверху по скрипту Paguo-86PK - и фон то появляется, то исчезает, меняя свои картинки.
В итоге получилось примерно что хотелось: фоновые картинки плавно появляются и исчезают.
Единственное, хочется, чтобы была пауза когда картинка уже появилась, а не была непрерывная смена картинок.
Ответить с цитированием
  #13 (permalink)  
Старый 15.03.2017, 16:54
Аватар для Paguo-86PK
Профессор
Отправить личное сообщение для Paguo-86PK Посмотреть профиль Найти все сообщения от Paguo-86PK
 
Регистрация: 16.09.2009
Сообщений: 253

Более аккуратный вариант
<style>
.ghost_thumb {
	height		:120px;
}
.ghost_thumb img {
	position	:absolute;
}
</style>
<script>
var	Ghosting = function(ghosts) {
	var	Thumbs	= [];
	function Slider() {
		Thumbs.forEach(function(thumb) {
			var	gap = thumb.pause + thumb.fading;
			thumb.phase = (thumb.phase + 1) % (gap * thumb.slides.length);
			var	phase = thumb.phase % gap;
			var	index = (thumb.phase - phase) / gap;
			var	next = (index + 1) % thumb.slides.length;
			if(phase >= thumb.pause)
				thumb.slides[index].style.opacity = 1.0 - (phase - thumb.pause) / thumb.fading,
				thumb.slides[next].style.opacity = 0.0 + (phase - thumb.pause) / thumb.fading;
		});
		setTimeout(Slider.bind(this), 10);
	}
	ghosts.forEach(function(thumb) {
		var	props = thumb.split(/\s+/);
		var	el = document.getElementById(props[0]);
		if(el) {
			var	imgs = el.getElementsByTagName("img");
			if(imgs.length) {
				Thumbs.push({
					frame	: el,
					slides	: imgs,
					fading	: props[1],
					pause	: props[2],
					phase	: 0
				});
				for(var i = 0; i < imgs.length; ++ i)
					imgs[i].style.opacity = 0;
			}
		}
		Slider();
	});
	
}
</script>
<body onload='Ghosting(["Gallery_two 25 3","Gallery_three 15 9"])'>
<p>Плавность - 25, Пауза - 3</p>
<div id=Gallery_two class=ghost_thumb>
<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
<img src='http://a.disquscdn.com/1489123367/images/noavatar92.png' />
</div>
<p>Плавность - 15, Пауза - 9</p>
<div id=Gallery_three class=ghost_thumb>
<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
<img src='http://a.disquscdn.com/1489123367/images/noavatar92.png' />
<img src='http://javascript.ru/forum/image.php?u=3602&dateline=1489262044' />
</div>
</body>
Ответить с цитированием
  #14 (permalink)  
Старый 15.03.2017, 17:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

смена картинок с opacity эффектом

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .carousel{
    width: 350px;
    height: 170px;
    position: relative;
  }
  .carousel img{
     position: absolute;
     width: 100%;
     height: 100%;
     opacity: 0;
     border-radius: 8px;
     box-sizing: border-box;
     border: #8B4513 2px solid;
     transition: opacity .8s ease-in;
  }
  .carousel img.show{
    opacity: 1;
  }
   .carousel.vertical{
    width: 170px;
    height: 350px;
   }

  </style>

  <script>
  window.addEventListener("DOMContentLoaded", function() {
    [].forEach.call(document.querySelectorAll(".carousel"), function(el) {
        var img = el.querySelectorAll("img"),
            len = img.length,
            i = len - 1,
            p = el.dataset.pause || 5E3;
        !function g() {
            img[i].classList.remove("show");
            i = ++i % len;
            img[i].classList.add("show");
            window.setTimeout(g, p)
        }()
    })
});
  </script>
</head>

<body>
<div class="carousel" data-pause="3000">
  <img src="http://sport-magazindom.ru/wp-content/uploads/2016/05/1cbe44f2ac36cff2da2bbf7356b4a004.jpg" alt="">
  <img src="http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg" alt="">
  <img src="http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg" alt="">
  <img src="http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg" alt="">
</div>
<div class="carousel vertical" data-pause="1000">
  <img src="https://im0-tub-ru.yandex.net/i?id=164eda9533e043b61c9abb3e9fb9ecc6-l&n=13" alt="">
  <img src="http://static.mnogonado.net/images/img.php?w=250&l=%2Fstore%2Fimage%2F800x600_qdv_57108c999ba0b1775c4bfe263023fb6a_1474795-404.png" alt="">
  <img src="http://rugirlz.com/pics/hv_dp20088034.jpg" alt="">
  <img src="https://im1-tub-ru.yandex.net/i?id=34d38102784fbb45657d73def5d2178f-l&n=13" alt="">
</div>
</body>
</html>
Ответить с цитированием
  #15 (permalink)  
Старый 15.03.2017, 21:07
Новичок на форуме
Отправить личное сообщение для e-partner Посмотреть профиль Найти все сообщения от e-partner
 
Регистрация: 14.03.2017
Сообщений: 5

Спасибо, Рони и Радио-86РК, вам уже плюсики сайт не дает ставить. Другие за меня поставят! )))

Вы немного отклонились от темы и от моего задания: менять нужно именно фоновые картинки. Я по этой поисковой фразе из Гугла сюда и пришел. Хороший скрипт по смене картинок у меня есть, а вот к фоновым картинкам он не подошел...потому и начал искать))).
В любом случае всем спасибо за помощь, по другим вопросам я сам также "за лайки" помогал людям на форумах! )))

P.S. Как я понимаю, в последний двух постах с кодом нужно добавить "document.getElementById(" там где надо, чтобы была именно фоновая картинка, а не img. А где это надо - кому надо найдет)))
Ответить с цитированием
  #16 (permalink)  
Старый 15.03.2017, 21:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

смена фона с opacity эффектом
e-partner,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .carousel{
    width: 350px;
    height: 170px;
    position: relative;
    opacity: 0;
     border-radius: 8px;
     box-sizing: border-box;
     border: #8B4513 2px solid;
     transition: opacity .8s ease-in;
     background-size: 350px 170px;
  }
  .carousel.show{
    opacity: 1;
  }
   .carousel.vertical{
    width: 170px;
    height: 350px;
    background-size: 170px 350px;
   }

  </style>

  <script>
 window.addEventListener("DOMContentLoaded", function() {
    [].forEach.call(document.querySelectorAll(".carousel"), function(el) {
        var img = JSON.parse(el.dataset.src),
            len = img.length,
            i = len - 1,
            p = el.dataset.pause || 5E3;

        function g() {
            i = ++i % len;
            el.style.backgroundImage = "url(" + img[i] + ")";
            el.classList.add("show");
            window.setTimeout(k, p)
        }
        g();

        function k() {
            el.classList.remove("show");
            window.setTimeout(g, 800)
        }
    })
});
  </script>
</head>

<body>
<div class="carousel" data-pause="3000"
data-src='["http://sport-magazindom.ru/wp-content/uploads/2016/05/1cbe44f2ac36cff2da2bbf7356b4a004.jpg",
"http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg",
"http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg",
"http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg"]'>

</div>
<div class="carousel vertical" data-pause="5000" data-src='[
  "https://im0-tub-ru.yandex.net/i?id=164eda9533e043b61c9abb3e9fb9ecc6-l&n=13",
  "http://static.mnogonado.net/images/img.php?w=250&l=%2Fstore%2Fimage%2F800x600_qdv_57108c999ba0b1775c4bfe263023fb6a_1474795-404.png",
  "http://rugirlz.com/pics/hv_dp20088034.jpg",
  "https://im1-tub-ru.yandex.net/i?id=34d38102784fbb45657d73def5d2178f-l&n=13"]'>
</div>
</body>
</html>
Ответить с цитированием
  #17 (permalink)  
Старый 15.03.2017, 22:54
Аватар для Paguo-86PK
Профессор
Отправить личное сообщение для Paguo-86PK Посмотреть профиль Найти все сообщения от Paguo-86PK
 
Регистрация: 16.09.2009
Сообщений: 253

Сообщение от рони
смена фона с opacity эффектом
Сдaюсь!
Использовали css3-трюки, с которыми я вообще поленился некогда разбираться ещё при начале распространения html5 и svg.
P.S.: Сейчас нужно разобраться с собственным DVR-плагином. А то преждний писал впопыхах, тяп-ляп и как попало, чтобы попрактиваться со Squirrel на досуге…
Теперь расплачиваюсь и пишу всё заново
И спотыкаюсь всюду. Ползу медленнее черепахи
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Узнать размер картинки через форму file Sergey67 Общие вопросы Javascript 1 24.12.2011 06:37
Смена картинки по наведению курсора мыши 5 секунд MironM Общие вопросы Javascript 22 27.09.2011 16:39
Изменение размеров картинки через скрипт SLV Общие вопросы Javascript 4 27.12.2010 11:40
Динамическое изменение размеров фоновой картинки ячейки shaitan Элементы интерфейса 4 15.04.2010 13:30
смена фоновой картинки у таблицы cuberboy Общие вопросы Javascript 0 15.10.2009 23:06