VPF::Смена изображений после изменения прозрачности.

mevgabri

Дата 5.11.2011, 13:17 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 24.10.2011

Репутация: нет
Всего: нет

Добрый день.

Нужно реализовать следующее: есть таблица с изображениями (изображение в каждой ячейке таблицы, каждое изображение-ссылка), прозрачность автоматически постепенно изменяется (без onClick, onMouseOut), и изображения становятся полностью прозрачными, после того как стали полностью прозрачными появляется новая таблица с изображениями (в каждой ячейке уже другое изображение).

user posted image

каким образом это реализовать? в каком направлении начинать "копать"?
я только начинаю изучать javascript, поэтому не очень понятно как написать такой скрипт.

если возможно, то подскажите готовый скрипт.

Спасибо. smile

$дмитрий

Дата 5.11.2011, 16:58 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 2
Всего: 45

Цитата

каким образом это реализовать?

Для этих целей хорошо подойдет библиотека jquery

Цитата

прозрачность автоматически постепенно изменяется

Вот пример плавного изменения прозрачности

Код


$(function(){
    $("div").hover(
        function() {
            $(this).stop().animate({"opacity": "1"}, "slow");
        },
        function() {
            $(this).stop().animate({"opacity": "0.2"}, "slow");
        });
 
});

mevgabri

Дата 5.11.2011, 18:00 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 24.10.2011

Репутация: нет
Всего: нет

в приведенном вами примере, если я правильно поняла: изменение прозрачности происходит благодаря св-ву hover,

а мне нужно, чтобы прозрачность изображений в ячейках таблицы менялась без подведения мыши, т.е. независимо от того, куда подвел мышь пользователь будет работать скрипт: меняется прозрачность всех изображений в таблице, когда изображения стали полностью прозрачными на их месте появляются другие изображения.

как?

спасите, помогите smile

спасибо.

ksnk

Дата 5.11.2011, 20:17 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Код


<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(function(){
$('.switchsrc').each(function(){ 
   var $this=$(this),
       $src=$this.attr('src'),
       $altsrc=$this.attr('altsrc'),
   x =function(src,complete){
   $this.animate({opacity:0},3000,function(){
     $this.attr('src',src).animate({opacity:1},5000,complete);
   });
   },
   y=function(){
       x($altsrc,function(){x($src,y)})
   }
   y();
});
})
</script>
</head>
<body>

<img class="switchsrc" src='1.gif' altsrc='2.gif'> 

</body>
</html>

Некоторая проблема возникнет с некошерным атрибутом altsrc, но можно сменить тип документа на XHTML

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

mevgabri

Дата 6.11.2011, 13:18 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 24.10.2011

Репутация: нет
Всего: нет

вот что у меня получилось:

Код



<head>
<title>       </title>

<script type="text/javascript">
 
function theRotator() {
    $('div#rotator ul li').css({opacity: 0.0});
 
    $('div#rotator ul li:first').css({opacity: 1.0});
 
    setInterval('rotate()',5000);
}
 
function rotate() {    

    var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));
 

    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));    
 
    
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);
 

    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
};
 
$(document).ready(function() {        

    theRotator();
});
 
</script>
</head>



<body>
<div id="rotator">                        
  <ul>
    <li class="show">
    <table>
    <tr>
    <td><a href="#"><img src="1.jpg"></a></td>
    <td><a href="#"><img src="2.jpg"></a></td>
    <td><a href="#"><img src="3.jpg"></a></td>
    <td><a href="#"><img src="4.jpg"></a></td>
    <td><a href="#"><img src="5.jpg"></a></td>
    </tr>
    </table>
    </li>
    <li class="show">
    <table>
    <tr>
    <td><a href="#"><img src="5.jpg"></a></td>
    <td><a href="#"><img src="4.jpg"></a></td>
    <td><a href="#"><img src="3.jpg"></a></td>
    <td><a href="#"><img src="2.jpg"></a></td>
    <td><a href="#"><img src="1.jpg"></a></td>
    </tr>
    </table>
    </li>
  </ul> 
</div>

</body>
</html>

но, наверное, не очень правильно "загонять" таблицу в список.

и как реализовать, чтобы картинки в ячейках таблицы менялись в произвольном порядке?

т.е. моя реализация их меняет только так как они записаны в списке.

Это сообщение отредактировал(а) mevgabri - 6.11.2011, 13:19

$дмитрий

Дата 6.11.2011, 15:45 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 2
Всего: 45

Цитата

и как реализовать, чтобы картинки в ячейках таблицы менялись в произвольном порядке?

Случайным образом? тогда
1. Считать все картинки в массив
2. Перемешать массив
3. Присвоить новые src

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »