HTML5特效库 中国地图导航特效源码

效果图

各位长友大家早上好!

今天给大家带来的是 中国地图导航特效源码!

适合各种地图介绍导航!

大家可以按照自己的意愿进行修改!

有想要文件版源码的朋友 可以在以往的文章中找到我的联系

废话不多说,上源码!

CSS:

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

body{font:12px/180% Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif;}

/* b_map */

.b_map{ margin-top:20px;padding-right:20px;width:704px;background:url(../img/chinamap.jpg) no-repeat 0px 0px;height:549px}

.e_map_tags{z-index:1;position:relative}

.e_map_tags li{width:90px;height:25px;z-index:1;position:absolute;text-align:center;padding-bottom:8px;display:block;font:bold 14px/25px simsun, arial, sans-serif;background:url(../img/map_tag1.png) no-repeat 0px 0px;color:#fff;top:0px;cursor:pointer;left:0px}

.e_map_tags .m_beijing{top: 371px;left: 316px;}

.e_map_tags .m_shanghai{top: 370px;

left: 589px;}

.e_map_tags .m_guangzhou{background:url(../img/map_tag2.png) no-repeat 0px 0px;top:314px;left:293px}

.e_map_tags .m_chengdu{top:230px;left:223px}

.e_map_tags .m_xian{top:190px;left:290px}

.e_map_tags .m_xianggang{top:320px;left:345px}

.e_map_tags .m_hangzhou{background:url(../img/map_tag2.png) no-repeat 0px 0px;top: 467px;

left: 415px;}

.e_map_tags li:hover{background-position:0px -38px}

.e_map_tags li.hover,.e_map_tags .centers{background-position:0px -38px}

.e_map_info{z-index:2;position:relative}

.e_map_info .m_content{z-index:1;border:#ccc 1px solid;position:absolute;padding:15px 20px;background-color:#fff;width:280px;display:block;top:0px;left:0px}

.e_map_info .hide{display:none;}

.e_map_info .m_content i{z-index:1;position:absolute;width:8px;bottom:-8px;display:block;background:url(../img/map_idx1.png) no-repeat 0px 0px;height:8px;overflow:hidden;right:-1px;_right:-2px}

.e_map_info .m_content h4{padding-left:180px;font:16px/33px “microsoft yahei”, simsun, arial, sans-serif;margin-bottom:18px;background:url(../img/map_qunar.jpg) no-repeat 0px 0px;height:50px;}

.e_map_info .m_content p{font:14px/22px simsun, arial, sans-serif}

.e_map_info .m_beijing{top: 83px;left: 748px;}

.e_map_info .m_shanghai{top: 83px;

left: 748px;}

.e_map_info .m_guangzhou{top:176px;left:-58px}

.e_map_info .m_chengdu{top:92px;left:-127px}

.e_map_info .m_xian{top:74px;left:-60px}

.e_map_info .m_xianggang{top:204px;left:-4px}

.e_map_info .m_hangzhou{top: 83px;

left: 748px;}

/*m_content_side*/

.m_content_side{ height:1px;width:100%; position:relative;}

.m_content_side a{ position:absolute;top:0; z-index:2;float:left;width:30px; height:30px;}

.m_content_side a img{width:30px; height:30px;}

.m_content_side a.m_left{left:0px;}

.m_content_side a.m_right{right:0;}

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片