Question

我知道有一个类似标题的帖子，但我并没有尝试达到同样的目的。我正在努力实现类似于本网站正在做的事情 - https://www.commuterclub.co.uk/

（向下滚动到“帮助英国各地的通勤者获得更好的通勤”部分）

我从JSON api获取信息，向我提供X和Y坐标以及一些文本，我想用圆形填充图像（重新呈现x＆amp; y坐标）和使用javascript的文本填充气泡通勤俱乐部网站。

我找到了一个插件 - http://www.jqueryscript.net/zoom/jQuery-Plugin-For-Adding-Notes-Markers-To-An-Image-imgNotes.html - 我能够用标记和工具提示绘制图像，但不是我想要实现的。

修改

我使用上面的插件将标记放在我的图像上，使它们消失并随机重新出现。见下面的代码：

<script type="text/javascript">
;(function($) {
    $(document).ready(function() {
            var $img = $("#image").imgNotes({
                onShow: $.noop,
                onAdd: function() {
                        this.options.vAll = "bottom";
                        this.options.hAll = "middle";
                        var elem =     $(document.createElement('div')).addClass("mrkr").css({
                                                                        "background-color": "#9AB54D",
                                                                        height: "8px",
                                                                        width: "8px",
                                                                        "border-radius": "60px",
                                                                        "text-align": "center",
                                                                        color: "#fff"
                                                                    }).attr("title", "");
                        var self = this;
                        $(elem).tooltip({
                                content: function() {
                                            return $(elem).data("note");
                                        }
                        });
                        return elem;
                } 
    });
            $(".mrkr").tooltip().tooltip("open");
    $img.imgNotes("import", [   {x: "0.5", y:"0.5", note:"Text 1"}, 
                                {x: "0.322", y:"0.269", note: "Text 2"},
                                {x: "0.9", y:"0.6", note: "Text 3"},
                                {x: "0.1", y:"0.456", note: "Text 4"},
                                {x: "0.345", y:"0.987", note: "Text 5"},
                                {x: "0.824", y: "0.593", note: "Text 6"}]);

    var divs = $('.viewport').find('.mrkr'),
len = divs.length,
randomDiv,
speed = 2000;
var interval = setInterval(
            function() { 
                    randomDiv = Math.floor(Math.random()*len);
                    divs.removeClass('show');
                    divs.eq(randomDiv).addClass('show');                         
            } , speed);
  });
})(jQuery);
</script>

我希望在给定时间显示所有4个标记，并且当新标记出现时，其中一个标记会逐渐淡出。

Javascript不是我最强的语言，所以您可以给予所有帮助。

由于

Answer 1

因此您可以迭代通过间隔时收到的数据列表项目，并一次显示一个或两个引脚。

在字符串中添加气泡（html和css），并在每次显示新引脚时将其传递给 createElement ，并从DOM中删除旧的气泡元素。

使用javascript（与其他帖子不同）为图像添加标记

1 个答案: