Question

我会将title属性用作图库中的标题。标题将位于页面上的fixed位置。我无法动态更新title中div属性的内容，一次显示各种标题。

html标记

<!-- fist slide -->  
<div class="section" id="gallery-start">
    <div class="content">
        <img src="img/1.jpg" title="Caption text 1">
    </div>
</div>

...

<!-- caption -->     
<div class="caption-display"></div>

js script

$('.caption-display').each(function(i) {
    $(this).html($('.gallery-element').eq(i).attr('title'));
});

例如

Jsfiddle

Answer 1

我希望它会有用，我这样解决了。

<强> HTML

<!-- caption -->
<div class="caption-box">
    <p class="caption-description">
        Caption text 1
    </p>
</div>

<强> CSS

.caption-description
{
    display: none;
}

.caption-display
{ 
    position: fixed;
    bottom: 10px;
    left: 10px;
}

<强> JS

$(window).load(function () {
    var window_center = $(window).height();
    var threshold = 0;
    $(window).on("scroll resize", function () {
        scroll = $(window).scrollTop();

        $('.section').each(function () {
            var post_center = $(this).height()/2 + $(this).offset().top;
            if (post_center + threshold < window_center + scroll ||
                post_center - threshold < window_center + scroll){
                if (!$(this).hasClass('active')){
                    $('.section').removeClass('active');
                    $(this).addClass('active');
                    $('.caption-display').hide();
                    var newDescr = $(this).find('.caption-description');
                    $('.caption-display').html(newDescr.html());    
                    $('.caption-display').fadeIn('slow');
                }
            }
        });
    });

    $(document).ready(function () {
        $(window).trigger('scroll'); // init the value
    });
});

jQuery / Title属性 - 在视口中显示/更新

1 个答案: