前端小白的开发之路之 ————右侧悬浮二维码（笔记）

右侧鼠标悬浮显示二维码

 

jsp页面

<div οnmοuseleave="hideRqCode()">
    <div id="divPortalFixBar" class="btn-group-vertical fix-vrm-bar" style="position:fixed">
        <button  type="button" class="btn btn-default" οnmοuseοver="showGZH('GZH')" ><!--οnmοuseοver="showGZH()"  -->
            <span>公众<br>号</span>
        </button>
        <button  type="button" class="btn btn-default" οnmοuseοver="showGZH('WX')">
            <span>微信</span>
        </button>
        <button  type="button" class="btn btn-default" οnmοuseοver="showGZH('ZFB')">
            <span>支付<br>宝</span>
        </button>
    </div>
    <div class="btn-group-vertical fix-vrm-bar2" style="position:fixed">
    
        <!--οnmοuseοver="showGZH()"  -->
            <img id="GZH"  hidden="true" title="微信公众号" style="position:absolute;width:160px" src="${host}/resources/image/weixin.jpg"/>        
            <img id="WX"  hidden="true" title="微信" style="position:absolute;width:160px" src="${host}/resources/image/weixin.jpg"/>
            <img id="ZFB" hidden="true" title="支付宝" style="position:absolute;width:160px" src="${host}/resources/image/weixin.jpg"/>
    </div>
</div>

css样式

.fix-vrm-bar {
    position: fixed;
    top: 350px;
    right: 10px;
    z-index: 999;
}
.fix-vrm-bar-up {
    position: fixed;

    z-index: 999;
}
.fix-vrm-bar button {
    height:54px;
    width:54px;
    font-size:15px;
}

.fix-vrm-bar2 {
    position: fixed;
    top: 350px;
    right: 226px;
    z-index: 999;
}

 

js代码

function showGZH(id){
    hideRqCode();    
    $("#"+id).show();
}
function hideRqCode(){
    $("#GZH").hide();
    $("#WX").hide();
    $("#ZFB").hide();
}

我再网上看到很多例子都是一个图就能实现的例子 ，

实际需求是这个是用户自己维护的图片不能固定

不知道哪位大神有更好的建议请回复一下。。