Glitter 波浪闪烁

基本用法

本框架制作了一套波浪闪烁效果，可用在地图位置指示，也可以用于图标按钮加强；默认是红色，使用ax-glitter类表示波浪闪烁。

                            <span class="ax-glitter"></span>

其他颜色

与本框架颜色使用一致，除了默认的红色闪烁，还可以使用蓝色、绿色、橙色、黄色、青色等，可使用的颜色类有：ax-primary，ax-success，ax-warning，ax-info，ax-question，默认是ax-error。

                               <div class="ax-row">
                                    <div class="ax-col ax-col-4"><section class="demo-section"><span class="ax-glitter ax-primary"></span></section></div>
                                    <div class="ax-col ax-col-4"><section class="demo-section"><span class="ax-glitter ax-success"></span></section></div>
                                    <div class="ax-col ax-col-4"><section class="demo-section"><span class="ax-glitter ax-warning"></span></section></div>
                                    <div class="ax-col ax-col-4"><section class="demo-section"><span class="ax-glitter ax-info"></span></section></div>
                                    <div class="ax-col ax-col-4"><section class="demo-section"><span class="ax-glitter ax-question"></span></section></div>
                               </div>

尺寸

有3中波浪尺寸，分别是ax-sm，ax-md，ax-lg，默认是ax-md。

                              <div class="ax-row">
                                    <div class="ax-col ax-col-8"><section class="demo-section"><span class="ax-glitter ax-sm"></span></section></div>
                                    <div class="ax-col ax-col-8"><section class="demo-section"><span class="ax-glitter ax-md"></span></section></div>
                                    <div class="ax-col ax-col-8"><section class="demo-section"><span class="ax-glitter ax-lg"></span></section></div>
                              </div>

添加内容

对波浪闪烁内部添加文字或者图标，文字或图标用i标签标示。

                               <div class="ax-row">
                                    <div class="ax-col ax-col-12"><section class="demo-section"><a href="###" class="ax-glitter ax-sm" style="width:2.8rem;height:28px"><i>1</i></a></section></div>
                                    <div class="ax-col ax-col-12"><section class="demo-section"><a href="###" class="ax-glitter ax-sm" style="width:2.8rem;height:28px"><i class="ax-iconfont ax-icon-good-f"></i></a></section></div>
                               </div>

地图热点

借助百度地图插件做一个热点实例。

JS HTML

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=M0Odnx4yOGSzD3cLlUP7DmtKben5axaw"></script>
<script type='text/javascript'>
  var mapAdd = new BMap.Map("map-add",{
            enableMapClick: false,
        });
        mapAdd.centerAndZoom(new BMap.Point(113.884582,22.612286), 16);
        mapAdd.addControl(new BMap.MapTypeControl({
            mapTypes: []
        }));
        mapAdd.setCurrentCity("深圳");
        mapAdd.enableScrollWheelZoom(true);
        //
        // 复杂的自定义覆盖物
        function ComplexCustomOverlay(point){
            this._point = point;
        }
        ComplexCustomOverlay.prototype = new BMap.Overlay();
        ComplexCustomOverlay.prototype.initialize = function(map){
            this._map = map;
            var glitter = this._div = document.createElement("span");
            glitter.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
            glitter.className="ax-glitter";
            mapAdd.getPanes().labelPane.appendChild(glitter);
        }
        ComplexCustomOverlay.prototype.draw = function(){
            var pixel = this._map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x - 6 + "px";
            this._div.style.top  = pixel.y - 6 + "px";
        }
        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(113.881195,22.613024), '','');
        mapAdd.addOverlay(myCompOverlay);
</script>

                                <div id="map-add" style="height:400px;"></div>