jquery+css3图像气泡文字说明 图片标注

jquery+css3图像气泡文字说明 图片标注1681
一款基于jQuery+CSS3实现的类似地图对某一地点增加标注,点击标注弹出详细信息。
相关js代码
jQuery(function(){
    // initialize of labels
    $('.labels a#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
        $('.labels a#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
            $('.labels a#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                $('.labels a#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                    $('.labels a#label5').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                        $('.labels a#label6').fadeIn(100).effect('bounce', { times:3 }, 300);
                    });
                });
            });
        });
    });

    // description close
    $('.description .close').click(function() {
        $(this).parent().fadeOut(500);
        return false;
    });

    // display description on click by labels
    $('.labels a').click(function() {
        $('.description p').html( $(this).find('p').html() ).parent().fadeIn(500);
        return false;
    });

    // close dialog on click outside
    $('.container').click(function() {
        $('.description').fadeOut(500);
    });
});

也许你还喜欢