Glitter 波浪闪烁

基本用法

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

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

其他颜色

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

                               <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-secondary"></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-ad"></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:28px;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:28px;height:28px"><i class="ax-iconfont ax-icon-good-fill"></i></a></section></div>
                               </div>
                        

地图热点

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

  • <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>