概述：
今天给大家分享一个个人觉得比较好看的自己做的地图控件。
效果：
整体样式和鼠标经过
选中的控件以及对应的操作
实现的代码：
1、icon.css
.icon{
display:inline-block;
width:20px;
height:20px;
background:transparent url(sprite.png) no-repeat 0 0;
text-indent:-9999px;
overflow:hidden;
margin: 7px;
}
.icon.zoomin{
background-position:-40px 0;
}
.icon.zoomout{
background-position:-60px 0;
}
.icon.geolocate{
background-position:-80px 0;
}
.icon.layer{
background-position:-100px 0;
}
.icon.legend{
background-position:-120px 0;
}
.icon.share{
background-position:-140px 0;
}
.icon.clipboard{
background-position:-160px 0;
}
.icon.link{
background-position:-180px 0;
}
.icon.close{
background-position:-200px 0;
}
.icon.close:hover{
cursor: pointer;
background-position:-200px -20px;
}2、style.css
html,body,ul,ol,li,form,fieldset,legend,h1,h2,h3,h4,h5,h6,p,input {
border:0;
margin:0;
padding:0;
background: #ddd;
font:12px/20px "Microsoft YaHei";
text-align: left;
}
.info-box{
position: absolute;
bottom: 0px;
left: 0px;
height:120px;
display: none;
width: 100%;
background: #f2f2f2;
border-top:solid rgba(0,0,0,0.6) 1px;
}
.info-box-content{
padding: 5px 8px;
}
.info-box-close{
position: absolute;
top: 0px;
right: 0px;
}
.map-control{
margin-top: 8px;
position:absolute;
top: 20px;
right: 30px;
border-radius:4px;
}
.control-box{
margin-top: 10px;
}
.control-button{
display:block;
height:35px;
width:35px;
background-color:rgba(0,0,0,0.6);
outline:none;
}
.control-button:hover {
background-color:#000;
}
.control-button.disabled {
background-color:rgba(0,0,0,0.5);
cursor:default;
}
.control-button.active {
background-color:#9ed485;
}
.control-button.single{
border-radius:4px;
}
.control-button.top{
border-radius:4px 4px 0 0;
}
.control-button.center{
border-radius:0;
}
.control-button.bottom{
border-radius:0 0 4px 4px;
}
.entry{
position: absolute;
margin-left: 20px;
margin-top:20px;
width:30px;
background:rgb(88,88,88);;
padding:4px 6px;
/*设置圆角*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
color: #ffffff;
text-align: center;
}
/*右三角*/
.entry-trangle-right{
position:absolute;
top:6px;
right:-5px;
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-left:8px solid rgb(88,88,88);
}
3、page.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/icon.css">
<script src="jquery.min.js"></script>
<script src="map.js"></script>
</head>
<body>
<div id="infoBox" class="info-box">
<div id="infoContent" class="info-box-content"></div>
<div id="infoClose"class="info-box-close">
<span class="icon close"></span>
</div>
</div>
<div class="map-control">
<div class="control-box">
<a class="control-button top" isclick="false" href="#" title="" data-original-title="放大">
<span class="icon zoomin"></span>
</a>
<a class="control-button bottom" isclick="false" href="#" title="" data-original-title="缩小">
<span class="icon zoomout"></span>
</a>
</div>
<div class="control-box">
<a class="control-button top" isclick="true" href="#" title="" data-original-title="图层">
<span class="icon layer"></span>
</a>
<a class="control-button bottom" isclick="true" href="#" title="" data-original-title="图例">
<span class="icon legend"></span>
</a>
</div>
</div>
</body>
</html>4、page.js
$(function(){
$(".control-button").on("mouseover",function(){
$("#entry").remove();
var top = $(this).offset().top;
var entry = $("<div />").attr("id","entry").addClass("entry")
.append($("<div />").addClass("entry-trangle-right"))
.append($(this).attr("data-original-title"))
.css("top",(top-40)+"px").css("right","40px")
.appendTo($(".map-control"));
});
$(".control-button").on("mouseout",function() {
$("#entry").remove();
});
$(".control-button").on("click",function(){
if($(this).attr("isclick")==="true") {
var cls = $(this).attr("class");
if(cls.indexOf("active") > 0){
$(this).removeClass("active");
$("#infoBox").animate({height:"hide"},"slow",null,function(){
$("#infoContent").html("");
});
}
else{
$(".control-button").removeClass("active");
$(this).addClass("active");
var title = $(this).attr("data-original-title");
$("#infoBox").animate({height:"show"},"slow",null,function(){
$("#infoContent").html("").append(title);
});
}
}
});
$("#infoClose").on("click",function(){
$(".control-button").removeClass("active");
$("#infoBox").animate({height:"hide"},"slow",null,function(){
$("#infoContent").html("");
});
})
});源代码下载地址：http://download.csdn.net/detail/gisshixisheng/9008937
