Есть вопрос?
Зайди на форум

Поиск на сайте: Advanced

Denix - новый дистрибутив Linux. Русификация Ubuntu и установка кодеков

dkws.org.ua
Форум сайта dkws.org.ua
 
Главная    ТемыТемы    АльбомАльбом    РегистрацияРегистрация 
 ПрофильПрофиль   Войти и проверить личные сообщенияВойти и проверить личные сообщения   ВходВход 

cкрипт плавной замены имеджа javascript+jquery

 
Начать новую тему Ответить на тему    Список форумов dkws.org.ua -> Сайтостроение
 
Автор Сообщение
Martin

Завсегдатай


Зарегистрирован: 28.07.2009
Сообщения: 623
Откуда: Харьков

СообщениеДобавлено: Чт Янв 12, 2012 11:52 pm    Заголовок сообщения: cкрипт плавной замены имеджа javascript+jquery
Ответить с цитатой

добил таки, заработал:
Код:

$(document).ready(function(){
$("div.aio").mouseover(function() {
$("div.aio2").fadeIn("slow");
  });
$("div.aio2").mouseout(function() {
$("div.aio2").fadeOut("slow");
});
});

пользуйтесь, тестируйте

ЗЫ. библиотека http://code.jquery.com/jquery-latest.js

в коде:
div.aio - текущий имедж
div.aio2 - заменяемый при наведении курсора
Вернуться к началу
Посмотреть профиль Отправить личное сообщение
Martin

Завсегдатай


Зарегистрирован: 28.07.2009
Сообщения: 623
Откуда: Харьков

СообщениеДобавлено: Пт Янв 13, 2012 12:04 am    Заголовок сообщения:
Ответить с цитатой

знаю, есть скрипты для этих целей, типа:
Код:
$(document).ready(function(){
  $('div.button1 a').css({ 'backgroundPosition': '0 0' }).hover(
      function(){
        $(this).stop()
          .animate({
            'opacity': 0
          }, 500);
     },
     function(){
        $(this).stop()
          .animate({
            'opacity': 1
          }, 500);
     }
   );
});

но, х@й ногу сломаешь, разобраться как он работает. у меня же все просто и понятно. я как и олег алеексеевич, за простоту и элегантность кода. Wink
Вернуться к началу
Посмотреть профиль Отправить личное сообщение
Mega

Участник тусовки


Зарегистрирован: 06.10.2010
Сообщения: 219
Откуда: из Украины

СообщениеДобавлено: Пт Янв 13, 2012 6:08 pm    Заголовок сообщения:
Ответить с цитатой

Martin, а чем вам hover в css не понравился? Вы же сами написали, что код должен быть простым и понятным)
_________________
<?php echo "А php вещь классная)" ?>
Вернуться к началу
Посмотреть профиль Отправить личное сообщение нет Моб. телефон
Anderson

Завсегдатай


Зарегистрирован: 08.07.2006
Сообщения: 642
Откуда: localhost

СообщениеДобавлено: Пт Янв 13, 2012 9:40 pm    Заголовок сообщения:
Ответить с цитатой

не люблю jQuery - почти не контроллируешь ситуацию с ним и код километровый и очень запутанный (с принципом возвращения того самого обьекта) . Javascript + DOM CSS + setTimeout / setInterval + events (onMouseOver/onClick) + XMLHTTPRequest (AJAX) рулят имхо Smile
_________________
ArchLinux + Enlightenment 17 (E17)
Вернуться к началу
Посмотреть профиль Отправить личное сообщение anderson.dunai@gmail.com Моб. телефон ICQ Number
Martin

Завсегдатай


Зарегистрирован: 28.07.2009
Сообщения: 623
Откуда: Харьков

СообщениеДобавлено: Пт Янв 13, 2012 11:27 pm    Заголовок сообщения:
Ответить с цитатой

Anderson, я на jQuery, как раз перешел, когда javascript не достаточно стало.
Код:
setTimeout / setInterval + events (onMouseOver/onClick)
про этоо умолчу, я даже не знаю, что это Embarassed Аякс пока отдыхает. Заказчику, как правило, все равно, с перезагрузкой страницы или без нее, осуществляется переход по ссылкам.
Mega, в Drupal удобнее вызвать ссылку jQuery.
Вернуться к началу
Посмотреть профиль Отправить личное сообщение
Martin

Завсегдатай


Зарегистрирован: 28.07.2009
Сообщения: 623
Откуда: Харьков

СообщениеДобавлено: Сб Янв 14, 2012 12:33 am    Заголовок сообщения:
Ответить с цитатой

вот немножко доработал, теперь на фоне картинки будет появляться другой элемент(в даном случае - список) параллельно замещающего имеджа:
Код:
<script>
$(document).ready(function(){   
$("div.aio").mouseover(function() {
$("div.aio2").fadeIn("slow");
$(".aio3").fadeIn("slow");
  });
$(".aio3").mouseover(function() {
$("div.aio2").css("display", "block");
$("div.aio").css("display", "none");
  });
$(".aio3").mouseout(function() {
$("div.aio2").css("display", "block");
$(".aio3").css("display", "block");
  });
$("div.aio2").mouseout(function() {
$("div.aio2").fadeOut("slow");
$(".aio3").css("display", "none");
$("div.aio").fadeIn("slow");
  });
});
</script>

.aio3 - элемент
Вернуться к началу
Посмотреть профиль Отправить личное сообщение
Mega

Участник тусовки


Зарегистрирован: 06.10.2010
Сообщения: 219
Откуда: из Украины

СообщениеДобавлено: Сб Янв 14, 2012 8:12 pm    Заголовок сообщения:
Ответить с цитатой

Martin писал(а):
Mega, в Drupal удобнее вызвать ссылку jQuery.

то есть?
Martin, киньте линк, если не секрет.
_________________
<?php echo "А php вещь классная)" ?>
Вернуться к началу
Посмотреть профиль Отправить личное сообщение нет Моб. телефон
Martin

Завсегдатай


Зарегистрирован: 28.07.2009
Сообщения: 623
Откуда: Харьков

СообщениеДобавлено: Пн Янв 16, 2012 9:44 am    Заголовок сообщения:
Ответить с цитатой

Цитата:
Цитата:
в Drupal удобнее вызвать ссылку jQuery.
то есть?

попытайся назначить событие javascript к пункту Primary links . скажем, мне нужно, чтобы при наведении/нажатии/уводе курсора на этот пункт вызывалась нужная мне фунция.
Вернуться к началу
Посмотреть профиль Отправить личное сообщение
олег алексеевич

Тысячник


Зарегистрирован: 18.01.2009
Сообщения: 1365
Откуда: ua Кропивницкий

СообщениеДобавлено: Пт Янв 20, 2012 11:56 am    Заголовок сообщения:
Ответить с цитатой

Я тоже не пойму значимость применения библиотеки jquery,да еще загружаемой с стороннего сервера.
Ну кроме понтов перед заказчиком.
_________________
помощь в личку платно.Удалю вирус,шелл с сайта Джумла, Битрикс .
Создам плагин , модуль под заказ для VirtueMart , JoomShopping
Вернуться к началу
Посмотреть профиль Отправить личное сообщение ICQ Number
den

Старожил


Зарегистрирован: 31.01.2006
Сообщения: 13868
Откуда: Кировоград, Украина

СообщениеДобавлено: Пт Янв 20, 2012 2:30 pm    Заголовок сообщения:
Ответить с цитатой

Накинулись на человека. Ну я тоже порой балуюсь jQuery, да хоть и не самое оптимальное решение, но как говорится, кто к чему привык. Question
Вернуться к началу
Посмотреть профиль Отправить личное сообщение dhsilabs@jabber.ru
олег алексеевич

Тысячник


Зарегистрирован: 18.01.2009
Сообщения: 1365
Откуда: ua Кропивницкий

СообщениеДобавлено: Пт Янв 20, 2012 5:19 pm    Заголовок сообщения:
Ответить с цитатой

Вот так работает,небольшая ошибка была
Код:
$(document).ready(function(){
 $("div.aio2").mouseover(function() {
 $("div.aio2").fadeIn("slow");
   });
 $("div.aio").mouseout(function() {
 $("div.aio").fadeOut("slow");
 });
 })

В этой функции нужно указать класс div.aio,но работает только для одной картинки
Код:
$(document).ready(function(){
  $('div.aio').css({ 'backgroundPosition': '0 0' }).hover(
      function(){
        $(this).stop()
          .animate({
            'opacity': 0
          }, 500);
     },
     function(){
        $(this).stop()
          .animate({
            'opacity': 1
          }, 500);
     }
   );
});

Ну и скрипт замены одного фото на другое,правда не плавно.
Код:
function deleteFoto(){
      document.fontain.style.display="none";
     }
Вернуться к началу
Посмотреть профиль Отправить личное сообщение ICQ Number
Martin

Завсегдатай


Зарегистрирован: 28.07.2009
Сообщения: 623
Откуда: Харьков

СообщениеДобавлено: Пн Янв 23, 2012 9:35 am    Заголовок сообщения:
Ответить с цитатой

den писал(а):
да хоть и не самое оптимальное решение, но как говорится, кто к чему привык. Question

Заметил еще: когде на одном языке програм-ия пишеш скрипты, скажем на javascript, то если нужно структуру подправить, легче уже это сделать с помощью javascript+jquery, а не в css, как положено. Аналогично : если нужно сделать сценарий, типа той же cms, то кажется что можно его состряпать тем же javascript, ибо он ближе, на данный момент. Как мейн-стрим. Еще Гераклит Гефесткий сказал: "нельзя войти в одну реку дважды".
Вернуться к началу
Посмотреть профиль Отправить личное сообщение
Показать сообщения:   
Начать новую тему Ответить на тему    Список форумов dkws.org.ua -> Сайтостроение Часовой пояс: GMT
Страница 1 из 1
 Главная страница сайта
 
Перейти:  
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
© Колисниченко Денис