Помощник
|
Плавная смена изображений Jquery |
InviS
|
Сообщение
#1
|
||
|
|
||
|
|||
Letmetouchyou |
13.2.2010, 14:25;
Ответить: Letmetouchyou
Сообщение
#2
|
|
http://www.html.by/showpost.php?p=56563&postcount=7
для белого фона допиши в css .img {background:#fff} только тут рандомная смена рисунков как вы в примере показали. чтобы из галереии поялвилиьс изображения в большом окное то сделай так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.im').click(function(){ var src = $(this).attr('src'); $('.pic').fadeOut('slow',function(){ $('.pic').attr('src',src); $('.pic').fadeIn('slow'); }); }); }); </script> <style> * body {background:#000;} .img {border:1px dotted #fff; background:#fff; width:200px; height:200px; } .pic {width:200px; height:200px;} .im {width:90px; height:90px; cursor:pointer; border:1px solid #336699;} </style> </head> <body> <img src="1/1.jpg" class="im"> <img src="1/2.jpg" class="im"> <img src="1/3.jpg" class="im"> <img src="1/4.jpg" class="im"> <img src="1/5.jpg" class="im"> <div class="img"> <img src="1/1.jpg" class="pic" > </div> </table> </body> </html> вот пример |
|
|
InviS
|
Сообщение
#3
|
|
Проблема была не в этом) В вашем примере они сменяются также, как и у меня =) Нужно чтоб одна картинка плавно другую сменяла, а не одна исчезала, а потом вторая появлялась. т.е. как бы одновременно запускался и fadeIn и fadeOut (100% - 0%, 90% -10%, 50% - 50%, 10% - 90%, 0% - 100%) типа такого)
|
|
|
Letmetouchyou |
14.2.2010, 1:00;
Ответить: Letmetouchyou
Сообщение
#4
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.im').click(function(){ var src = $(this).attr('src'); $('.img').css('background','url('+src+')'); $('.pic').fadeOut(2000,function(){ $('.pic').attr('src',src); $('.pic').fadeIn('slow'); }); }); }); </script> <style> * body {background:#000;} .img {border:1px dotted #fff; background:#fff; width:200px; height:200px; } .pic {width:200px; height:200px;} .im {width:90px; height:90px; cursor:pointer; border:1px solid #336699;} </style> </head> <body> <img src="1/1.jpg" class="im"> <img src="1/2.jpg" class="im"> <img src="1/3.jpg" class="im"> <img src="1/4.jpg" class="im"> <img src="1/5.jpg" class="im"> <div class="img"> <img src="1/1.jpg" class="pic" > </div> </table> </body> </html> так попробуй |
|
|
Letmetouchyou |
14.2.2010, 1:12;
Ответить: Letmetouchyou
Сообщение
#5
|
|
или так
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> var check=1; $(document).ready(function(){ $('.im').click(function(){ var src = $(this).attr('src'); if(check==1){ $('.a').attr('src',src); $('.b').fadeOut(2000); $('.a').fadeIn(2000); check=0; } else { $('.b').attr('src',src); $('.a').fadeOut(2000); $('.b').fadeIn(2000); check=1; } }); }); </script> <style> * body {background:#000;} .pic {width:200px; height:200px;} .img img {position:absolute; top:+150px; left:+10px;} .im {width:90px; height:90px; cursor:pointer; border:1px solid #336699;} </style> </head> <body> <img src="1/1.jpg" class="im"> <img src="1/2.jpg" class="im"> <img src="1/3.jpg" class="im"> <img src="1/4.jpg" class="im"> <img src="1/5.jpg" class="im"> <div class="img"> <img src="1/1.jpg" class="pic a" > <img src="1/2.jpg" class="pic b" > </div> </table> </body> </html> |
|
|
InviS
|
Сообщение
#6
|
|
Спасибо за старание помочь! Реализовал все используя 2 контейнера img. Может быть не элегантно, но действенно и красиво =)
|
|
|
Letmetouchyou |
15.2.2010, 16:14;
Ответить: Letmetouchyou
Сообщение
#7
|
|
InviS, так тоже самое и я сделал )
|
|
|
InviS
|
Сообщение
#8
|
|
Да! Только другая проблема появилась)) Если изображения разной ширины/высоты, то получается коллизия =)
|
|
|
Letmetouchyou |
15.2.2010, 17:08;
Ответить: Letmetouchyou
Сообщение
#9
|
|
InviS, если рахмеры первого ихображения меньге второго, то делать также смену изображений а после окночания сделать анимация ихеения размеров до нужного рамзера.
если наобороТ, размеры первого больше - то едслеть анимацию блока до ращмеров меньшеного изображения а помто смену изображения :Р для етого html <div style="position:relative; overflow:hidden"> <img style="position:absolute"> <img style="position:absolute"> </div> :D |
|
|
sikwel_hb |
27.2.2010, 0:47;
Ответить: sikwel_hb
Сообщение
#10
|
|
а как бы здесь сделать смену с эффектом перекрытия? т.е. чтобы с изменением прозрачности одна затухала а другая уже начинала стремиться к 100% непрозрачности
упс, не досмотрел пример)) |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Услуги по созданию и доработке скриптов PHP, MySQL, JavaScript, jQuery Разработка сайтов и сервисов под-ключ |
0 | alexey | 1168 | 24.11.2023, 14:46 автор: alexey |
|
Веб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP) | 56 | qpPeW | 44760 | 19.7.2023, 10:03 автор: qpPeW |
|
Продается сайт фотосток ИИ изображений Хороший вариант! |
20 | alexey | 3210 | 25.6.2023, 15:28 автор: alexey |
|
Ukr Private Proxy 4g Lifecell, Kyivstar, Vodafone (ТЕСТ, смена по ссылке, ротация) Продам Личные Украинские приватные мобильные прокси 4g Lifecell, Kyivs |
1 | Kostyaxxxx | 4244 | 20.6.2021, 20:26 автор: Kostyaxxxx |
|
Корректность показа вёрстки изображений на разных гаджетах Не сохраняются пропорции изображений на смартфонах |
1 | master-vek | 37244 | 25.3.2021, 13:22 автор: tedder |
Текстовая версия | Сейчас: 28.3.2024, 17:46 |