html - 如何在响应式跨浏览器安全的图像网格上精确弹出气球？

我试图根据通过 PHP 代码传递给页面的值，在图像上方弹出一个气球。

问题是我的解决方案在 Safari 上有点乱，我不确定为什么会出现错误。 slider 向右显示的太多了。我测试了 Firefox、IE 和 Chrome，它们都呈现半正常状态，但 Safari 的表现最差。

还有代码，jQuery:

$().ready(function () {
    var score = 64;
    var i = 0;
    $('.hers').find('.cll').each(function () {
        if (score != null) {
            if (i == score) {
                var me = $(this);
                me.append(' ' + score);
                bubbleMe(me);
                $(window).resize(function () {
                    bubbleMe(me);
                });
            }
            i++;
        }
    });

    function bubbleMe(me) {
        $('.bubbleImage').css('left', me.position().left - 7);
        $('.bubbleImage').css('top', me.position().top - 7);
        $('.bubbleImage').css('background-image', 'url("http://olthofhomes.com/dev/communities/img/Slider_30_60.png")');
        $('.bubbleImage').css('background-repeat', 'no-repeat');
    }
});

CSS:

.cll, .cll:empty {
    position: relative;
    width: calc(100% / 155);
    height: auto;
    display: inline-block;
    color: #000;
    z-index: 101;
    font-weight: bold;
}
.bubbleImage {
    position: absolute;
    width: 60px;
    height: 80px;
    left: 0px;
    top: 0px;
    z-index: 100;
}

HTML(使用 PHP 生成 155 个左右的 DIV，每个都有 100%/155th 宽度)

<div class="hers" style="margin-left: 5px;">
    <br />
    <br />
    <br />
    <br />
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="cll"></div>
    <div class="bubbleImage"></div> <a href="#hersindex"><img src="http://olthofhomes.com/dev/images/hers.jpg" class="imgHers" width="100%"></a>
</div>

最佳答案

我改用了 jQuery Slider。也应该是跨浏览器安全的。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
    $(function() {
        $("#slider").slider({
            min: 0,
            max: 160,
            value: <?php echo $model['HERSScore']; ?>
        });

        $('#slider .ui-slider-handle').text("<?php echo $model['HERSScore']; ?>");
    });
</script>
<div id="slider"></div>
<img src="hers.jpg" id="slider_image">
</div>

一些CSS

<style>
    .container99 {
        width: 100%;
        height: auto;
        border: 0px solid black;
        position: relative;
    }

    #slider {
        width: 100%;
        position: absolute;
        top: calc(50% - 5px);
        height: 0px;
        border: 0;
    }

    #slider_image {
        width: 100%;
        height: auto;
    }

    .ui-slider a {
        outline:none;
    }

    #slider .ui-slider-handle {
        background-image: url(communities/img/Slider_30_60.png);
        background-size: 100% 100%;
        background-color: green;
        border: 0;
        width: 30px;
        padding: 0 0 0 7px;
        margin: 0 0 0 0;
        color: #fff;
    }
</style>

关于html - 如何在响应式跨浏览器安全的图像网格上精确弹出气球？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26364447/

html - 如何在响应式跨浏览器安全的图像网格上精确弹出气球？

上一篇：html - 响应式纯 CSS 菜单

下一篇：javascript - 无法让页面在点击时滚动到顶部