Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
9 / 9 / 0
Регистрация: 14.12.2012
Сообщений: 138
Записей в блоге: 1
1

Изменение картинок при hover

22.09.2014, 18:09. Показов 734. Ответов 4
Метки нет (Все метки)

Добрый день,
http://codepen.io/4kings/pen/qrDnm попытался воссоздать скрипт который увидел на redcollar.ru/ у
арт-директора, но выглядит он как то иначе, подскажите что не так?
если можно сразу с примером
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
22.09.2014, 18:09
Ответы с готовыми решениями:

Изменение параметров hover через javascript
Всем привет! Понадобилось изменять hover через js К примеру у меня есть div и мне нужно изменить...

Изменение поведения :hover после выполнения скрипта
здраствуйте. у меня есть сверстаный список контактов, по задумке, при наведение на контакт должен...

Изменение alt у картинок
Есть код результатом которого получаем alt у картинки, а в поле input-a можем его изменить на...

Изменение SVG картинок через js
Здравствуйте. Подскажите пожалуйста как можно манипулировать svg изображением из javascript К...

4
72 / 72 / 29
Регистрация: 10.08.2012
Сообщений: 202
22.09.2014, 19:35 2
Да у вас тоже круто получилось =)
У них просто плавно меняется изображение. У меня
в закладках был неплохой примерчик, посмотрите его, может
поможет). Там и демо есть и исходник можно скачать.

P.S
Никогда сам такого не делал, надобности не было, пойду попробую)
1
9 / 9 / 0
Регистрация: 14.12.2012
Сообщений: 138
Записей в блоге: 1
23.09.2014, 13:30  [ТС] 3
Там, немного по другому, там есть bg и есть top слои
top просто накрывается слоем или другим способом отрисовуется, я же использовал 8 картинок, я в js вообще никакой, вот тперь нужно подумать как вставить transition что бы плавнее было

Добавлено через 10 минут
Добавил, сейчас обновлю

Добавлено через 17 часов 28 минут
актуально
0
Eva Rosalene
23.09.2014, 14:07
  #4
 Комментарий модератора 
Все коды загружаем на форум. Ссылка на песочницу - только как дополнение.
0
9 / 9 / 0
Регистрация: 14.12.2012
Сообщений: 138
Записей в блоге: 1
23.09.2014, 15:03  [ТС] 5
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 var x = 1;
    var Den = document.getElementById('face');
    var images = [document.getElementById("d1"), document.getElementById("d2"), document.getElementById("d3"), document.getElementById("d4"), document.getElementById("d5"), document.getElementById("d6"), document.getElementById("d7"), document.getElementById("d8")];
    var mainImage = document.getElementById("d1");
    var l = 0;
    var e = 0;
    var f = 0;
    var int = 0;
    var ss = 0;
    var visibs = 0;
    var random = 0;
 
    function readyFlickr()
    {
        clearTimeout(ss);
       // f = setTimeout(function() {
            int =  setInterval(function() {
                var opacity = images[7].style.opacity;
                if(opacity == 1)
                    images[7].style.opacity = 0;
                else
                    images[7].style.opacity = 1;
                visibs++;
                if(visibs == random) {
                    images[7].style.opacity = 0;
                    clearInterval(int);
                    setTimeout(flicker,50);
                    visibs = 0;
                }
            },100);
 
        //},500);
        console.log(images[7].style.opacity);
 
    }
 
    function flicker()
    {
        if(e > 0) {
         random = Math.floor((Math.random() * 10) + 1);
         ss = setTimeout(readyFlickr,1000);
        }
    }
 
    function enter()
    {
        if(x != 7)
        {
           // images[x].position = 'absoute';
            images[x].style.transition = "0.45s";
            images[x].style.opacity = 1;
            x++;
           e = setTimeout(enter, 
                          100)
            console.log("enter x = ",x);
        }
        else if(x == 7) {
            flicker();
            console.log("call flicker");
        }
 
    }
 
    function leave()
    {
        if(x != 1)
        {
           // mainImage.src = images[x].src;
            images[x].style.opacity = 0;
            x--;
            l = setTimeout(leave, 100)
        }
    }
 
    Den.onmouseenter = function()
    {
        clearTimeout(l);
        enter();
        console.log("enter x = " ,x);
    }
 
    Den.onmouseleave = function()
    {
        clearTimeout(ss);
        clearInterval(int);
        clearTimeout(f);
        clearTimeout(e);
          leave();
        console.log("leave x = " ,x);
    }
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="team1">
    <div id="face">
        <img src="http://en.4kings.com.ua/img/0.png" id="d1"><!-- ANOTHER STYLE-->
        <img src="http://en.4kings.com.ua/img/1.png" id="d2">
        <img src="http://en.4kings.com.ua/img/2.png" id="d3">
        <img src="http://en.4kings.com.ua/img/3.png" id="d4">
        <img src="http://en.4kings.com.ua/img/4.png" id="d5">
        <img src="http://en.4kings.com.ua/img/5.png" id="d6">
        <img src="http://en.4kings.com.ua/img/6.png" id="d7">
        <img src="http://en.4kings.com.ua/img/7.png" id="d8">
<div class="name">@lozovyk</div>
    </div> 
                 </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
@import url([url]http://fonts.googleapis.com/css?family=Ubuntu);[/url]
* { 
  
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
body{
  width:960px;
  margin:0 auto;
}
#d1{
    opacity: 1;
    display: block;
    position: absolute;
  -webkit-transition: opacity 3s;
    -moz-transition: opacity 3s;
    -ms-transition: opacity 3s;
    -o-transition: opacity 3s;
    transition: opacity 3s;
  
}
#d2,
#d3,
#d4,
#d5,
#d6,
#d7,
#d8
{
    position: absolute;
    opacity: 0;
    display: block;
  
  
}
 
#face{
    margin: 0 auto;
    position: absolute;
 
}
.team1{
  position:absolute;
}
 
.name{
  width:324px;
  padding:0 auto;
  font-family: 'Ubuntu', sans-serif;
  font-size:30px;
}
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
23.09.2014, 15:03

Нужно при клике, исключить события hover, во. И еще глюки .hover. Отключение .hover в случае активации .click
Нужно при клике, исключить события hover, во. И 1. Глюки .hover: При наведении на блок, к...

Изменение цвета SVG иконки при hover
Здравствуйте. Подскажите пожалуйста как сделать подсветку каждого айтема отдельно, при наведении...

Изменение кода jQuery hover для множества изображений
Здравствуйте, мне нужна помощь с кодом jQuery. Вот код для смены изображения с одного на другое, но...

Изменение картинок
Здравствуйте! У меня на сайте выводятся 4 картинки. Загружаю я их через обычный инпут файл, и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru