响应热点

Question

我找到了这篇文章。

hotspots on full-screen backgrounds with background-position: center

如果.container具有固定高度（例如300px），如何使codepen代码段工作？

http://codepen.io/agrayson/pen/vObLmZ?editors=001

std::list

Answer 1

花了我几个小时，但我终于明白了......

如果其他人有同样的问题，这里有一个工作的jsfiddle。

https://jsfiddle.net/yz9cveuv/

HTML

<div id="banner" style="background-image: url('http://image.shutterstock.com/display_pic_with_logo/438874/260105645/stock-photo-french-cheese-platter-for-dessert-260105645.jpg')">
    <div class="hot-spot" x="-30" y="-6">
        <i class="fa fa-plus"></i>
        <div class="tooltip">
            <h4>Round cheese</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            <a href="javascript:void(0)">Buy</a>
        </div>
    </div>
    <div class="hot-spot" x="15" y="-14">
        <i class="fa fa-plus"></i>
        <div class="tooltip">
            <h4>Smelly chese</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            <a href="javascript:void(0)">Buy</a>
        </div>
    </div>
    <div class="hot-spot" x="28" y="10">
        <i class="fa fa-plus"></i>
        <div class="tooltip">
            <h4>Green cheese</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            <a href="javascript:void(0)">Buy</a>
        </div>
    </div>
</div>

JS

$(document).ready(function() {
    positionHotSpots();
});

$(window).on('resize', function() {
    positionHotSpots();
});

/* Hotspots */
var imageWidth = 1920 - 200;
var imageHeight = 1000;
var imageAspectRatio = imageWidth / imageHeight;

function positionHotSpots() {
    var bannerWidth = $('#banner').width();
    var bannerHeight = $('#banner').height();
    $('.hot-spot').each(function() {
        var xPos = $(this).attr('x');
        var yPos = $(this).attr('y');
        if (imageWidth > bannerWidth) {
            xPos = xPos * (((100 / bannerWidth) * imageWidth) / 100);
            yPos = imageWidth / 100 * yPos + 'px';
        } else {
            yPos = yPos + '%';
        }
        $(this).css({
            'margin-left': xPos + '%',
            'margin-top': yPos,
            'display': 'block',
        });
        $(this).children('.tooltip').css({
            'margin-left': - ($(this).children('.tooltip').width() / 2)
        });
    });
}

$(document).on('click', '.hot-spot', function() {
    if ($(this).children('.tooltip').is(':visible')) {
        $(this).children('i').attr('class','fa fa-plus');
        $(this).children('.tooltip').css('display', 'none');
    } else {
        $('.hot-spot .tooltip').css('display', 'none');
        $('.hot-spot i').attr('class','fa fa-plus');
        $(this).children('i').attr('class','fa fa-minus');
        $(this).children('.tooltip').css('display', 'block');
        if ($(window).width() - ($(this).children('.tooltip').offset().left + $(this).children('.tooltip').outerWidth()) < 0) {
            $(this).children('.tooltip').css({
                'right': '0',
                'left': 'auto',
            });
        }
    }
});

CSS

/* Banner */
#banner {
    background-color: #ededed;
    background-size: cover;
    background-position: center center;
    height: 200px;
    padding-top: 200px;
    position: relative;
}
#banner .hot-spot {
    background-color: #ffdd00;
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    border-radius: 1000px;
    color: #fff;
    cursor: pointer;
    display: none;
    font-size: 20px;
    height: 45px;
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
}
#banner .hot-spot i {
    line-height: 45px;
}
#banner .hot-spot .tooltip {
    background-color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #333;
    display: none;
    font-size: 14px;
    left: 0px;
    opacity: 1;
    padding: 15px 20px 20px;
    position: absolute;
    text-align: left;
    top: 55px;
    width: 200px;
    z-index: 999;
}
#banner .hot-spot .tooltip h4 {
    margin-bottom: 10px;
}
#banner .hot-spot .tooltip p {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 10px;
}

快乐的日子！