Как анимировать последовательность изображений при наведении курсора влево / вправо с помощью jquery?

0

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

У меня есть набор изображений, которые выполняются по последовательности. Изображение похоже на прыгающий шар. Теперь у меня есть ссылка или якорный тег. И я хочу, когда пользователь двигает свою мышь вправо. Последовательность изображений будет увеличивать значение, если у меня есть изображение, подобное этому ball1.jpg следующее - ball2.jpg и т.д., Если мышь наведите курсор налево, он уменьшится до первого изображения, которое равно ball1.jpg.

У меня есть этот простой код.

<div id="image_container">
    <!-- should be replace if hovering -->       
    <img src="/sample_layout/images/ball1.jpg" />  <!-- this is the default image -->
    <img src="/sample_layout/images/ball2.jpg" />  <!-- this will replace if hover -->
    <img src="/sample_layout/images/ball3.jpg" />  <!-- this will replace if hover -->
    <img src="/sample_layout/images/ball4.jpg" />  <!-- this will replace if hover -->
    <img src="/sample_layout/images/ball5.jpg" />  <!-- this will replace if hover -->
</div>

<ul>
      <li><a href="#" class="dropdown">HOME</a></li><!-- This will be the link I need to hover -->
      <li class="sublinks">
          <a href="#">Link 1</a>        
      </li> 
</ul>

Здесь то, что я хочу сделать здесь, - это пример ссылки

http://www.dior.com/couture/home/en_gb

Это все парни. Можете ли вы дать мне какую-нибудь ссылку, как я могу это сделать?

Теги:

2 ответа

0

Я хочу сделать то же самое. У меня есть 29 отдельных изображений, которые примерно от 250 КБ до 350 КБ.

Вот ссылка jsfiddle, чтобы проверить ход выполнения.

var screenWidth;
var imgblock = ['https://cdn.shopify.com/s/files/1/1835/0713/files/v1.jpg', 
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v2.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v3.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v4.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v5.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v6.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v7.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v8.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v9.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v10.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v11.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v12.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v13.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v14.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v15.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v16.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v17.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v18.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v19.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v20.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v21.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v22.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v23.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v24.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v25.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v26.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v27.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v28.jpg',
            'https://cdn.shopify.com/s/files/1/1835/0713/files/v29.jpg'];

function onMouseMove(e) {
var x = e.pageX;
var theimg = imgblock[parseInt(x / screenWidth * imgblock.length)];
$('.verve-seq').css("background-image", "url('" + theimg + "')");
}

function onResize() {
screenWidth = $(document).width();
}

$(window).on('mousemove', onMouseMove);
$(window).resize(onResize);
onResize();

Есть одна серьезная проблема, которая у меня есть. Кажется, что каждый массив img загружается отдельно, что удаляет фон за миллисекунду, что дает быструю вспышку белого цвета, когда вы наводите курсор слева направо и наоборот. (не рекомендуется для людей с эпилепсией:/)

Я нашел эту концепцию на веб-сайте северного лица

Поделиться
  • 0
    Вот обновление, хотя у него все еще есть вспышки во время загрузки фоновых изображений CSS, вспышки не постоянны и удаляются после загрузки первых изображений из CSS. jsfiddle.net/qaaef7cL/1
0

Вы можете использовать mousemove для вычисления процента и определить, какой образ вы хотите отобразить. В этом примере вместо изображений используются цвета, вы можете изменить их на изображения. http://jsfiddle.net/h84Pj/

var screenWidth;
var colors = ['red', 'green', 'yellow'];

function onMouseMove(e) {
    var x = e.pageX;
    var color = colors[parseInt(x / screenWidth * colors.length)];
    $(document.body).css('background-color', color);
}

function onResize() {
    screenWidth = $(document).width();
}

$(window).on('mousemove', onMouseMove);
$(window).resize(onResize);
onResize();
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню