1

我正在尝试构建一个交互式横幅，当您将鼠标悬停在横幅上时，您可以将鼠标悬停在每个图像上并查看一段文本。

我试图让这个文本片段出现在我的名为“文本框”的 div 中，只是当鼠标离开每个图像时我努力让它改变（你必须看看我的小提琴作为例子）

让每个图像在悬停在 html 蓝色框上之前加载...

http://jsfiddle.net/uEDBA/3/

jQuery

$(document).ready(function () {

$(function () {

    var people = [{
        id: 1,
        name: 'Adam',
        bio: 'This is Adam\'s Biography. Sed ut perspiciatis unde omnis iste natus error sit voluptatem',
        image: 'justin.jpg'
    }, {
        id: 2,
        name: 'Brian',
        bio: 'This is Brian\' Biography. Sed ut perspiciatis unde omnis iste natus error sit voluptatem',
        image: 'chris.jpg'
    }, {
        id: 3,
        name: 'Charlie',
        bio: 'This is Charlie\'s Biography. Sed ut perspiciatis unde omnis iste natus error sit voluptatem',
        image: 'sam.jpg'
    },

    ];

    w = 750;
    h = 450;

    var counter = 0;

    (function nextFade() {
        counter++;
        var data = people[Math.floor(Math.random() * people.length)];
        var figure = $('<figure style="float:left; width:150px; height:150px; background:red;" />');
        var information = '<img src="http://www.placekitten.com/150/150" /><figcaption><h6>Meet ' + data.name + '</h6><p>' + data.bio + '</p><a href="#">Read about ' + data.name + '.</a> </figcaption>';
        figure.html(information).appendTo('.interactive-banner-faces').hide().fadeIn(100, function () {
            if (counter < 15) {
                nextFade();
            } else {

                $('.interactive-banner-faces').children(':nth-child(12n+1), :nth-child(12n+2), :nth-child(12n+3)').addClass('rightTxt');

                // On mouseover, fadeout the text overlay so we can play with the banner
                $('.interactive-banner').on('mouseenter', function () {

                    $('.textbox').html(data.bio).fadeIn();
                    $('.overlay').stop().animate({
                        'top': '-450px'
                    }, 200, 'easeInCirc');
                }).on('mouseleave', function () {
                    $('.textbox').html('').fadeOut();
                    $('.overlay').stop().animate({
                        'top': '0'
                    }, 600, 'easeOutCirc');
                });

            };
        });
    })();

});

});
4

0 回答 0