jQuery中国地图插件鼠标悬停显示省份介绍

admin
00
一款相对更实用些的jQuery中国地图插件,在该实例中,整张中国地图都按各个省份切割,鼠标滑过相应的省份时,即可弹出对应省份的具体介绍。

jquery-china-map.png


各省展示内容模版(以吉林省为例)

<!--    <div class="mapTipText mapTipText1">
        <div class="mapTipImg"><img src="images/jilin.jpg" alt=""/></div>
        <div class="mapTipList">
            <h2><a href="">吉林<span>Jilin</span></a></h2>
            <ul>
                <li><a href="">长白山</a></li>
                <li><a href="">长春</a></li>
                <li><a href="">延吉</a></li>
                <li><a href="">雾凇岛</a></li>
                <li><a href="">集安</a></li>
                <li><a href="">吉林市</a></li>
                <li><a href="">查干湖</a></li>
                <li><a href="">三角龙湾</a></li>
                <li><a href="">通化</a></li>
                <li><a href="">四平</a></li>
                <li><a href="">松原</a></li>
                <li><a href="">白城</a></li>
            </ul>
        </div>
    </div>-->

模版中的div.mapTipText的第二个classmapTipText1中的数字要对应目录js/res/chinaMapConfig.js中数据chinaMapConfig['names']['id'],才能正确显示对应省内容


js函数目前提供参数列表

$('#ChinaMap').SVGMap({
    mapWidth: 806,       //地图宽度
    mapHeight: 396,     //地图高度
    strokeWidth: 1,      //各省边界线宽度
    strokeColor: 'F9FCFE',  //各省边界线颜色 默认 :F9FCFE
    strokeHoverColor: 'd9d9d9', //各省hover边界线颜色 默认 :d9d9d9
    stateInitColor: '',  //统一各省展示颜色 默认 :不统一按chinaMapConfig.js里面设置的颜色展示
    stateHoverColor: 'ffffff',  //各省hover展示颜色  默认 :  ffffff
    stateDisabledColor: 'eeeeee',  //各省禁用展示颜色  默认 :  eeeeee
    showTip: true,      //是否显示提示  默认显示
    tipWidth: 280,      //展示内容(白色区域)宽度(单位:px)
    tipHeight: 110,     //展示内容(白色区域)高度(单位:px)
    tipOuterH : 30,     //展示内容在上下的连接(透明灰色区域)高度(单位:px)  这个展示的方向也可以单独配置在chinaMapConfig.js的chinaMapConfig['names']['direction']中设置
    tipOuterW : 30,     //展示内容在左右的连接(透明灰色区域)宽度(单位:px)
});



一款相对更实用些的jQuery中国地图插件,在该实例中,整张中国地图都按各个省份切割,鼠标滑过相应的省份时,即可弹出对应省份的具体介绍。

授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 暂无

猜你喜欢

admin

湖南省 长沙市

在最美的年纪遇见最美的自己

TA的发布