效果图:
CSS 及 Html:
css:
#bottom-img{position: absolute; bottom: 15px; right: 20px; z-index: 20;}
html:
<div id="bottom-img">
</div>
JS:控制图例的显示与隐藏,并根据不同的图片url显示不同的图例
//控制图例的显示与隐藏
var bottomImg = {
show:function (imageUrl) {
var imgDiv = document.getElementById('bottom-img');
imgDiv.innerHTML = "<img style='height:70px' src=" + imageUrl + " alt=''>";
},
hide:function() {
var imgDiv = document.getElementById('bottom-img');
imgDiv.innerHTML = "";
}
};
调用JS方法传图片路径:
function showImages(){
//显示图例
bottomImg.show(imageUrl);
}
//隐藏图例;
function hideImages(){
//隐藏图例
bottomImg.hide();
}