欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

PC页面客服微信QQ弹窗(鼠标移入显示移出隐藏)

程序员文章站 2022-07-11 11:58:10
...

PC页面客服微信QQ弹窗(鼠标移入显示移出隐藏)

PC页面客服微信QQ弹窗(鼠标移入显示移出隐藏)
PC页面客服微信QQ弹窗(鼠标移入显示移出隐藏)
html代码:

<div class="msg" onmouseleave="common.showModal(0)">
    <div class="msg-btns">
        <div class="msg-btn kefu-btn" onmouseenter="common.showModal(1)"><img src="/static/home/img/kefu.png" alt="" /></div>
        <div class="msg-btn weixin-btn" onmouseenter="common.showModal(2)"><img src="/static/home/img/weixin.png" alt="" /></div>
    </div>
    <div class="msg-modals">
        <!--客服-->
        <div class="msg-modal kefu-modal">
            <img src="/static/home/img/qq1.jpg"/>
            <img src="/static/home/img/qq2.jpg"/>
        </div>
        <!--微信-->
        <div class="msg-modal wx-modal">
            <img src="/static/home/img/weixin.jpg" alt="" />
            <p>咨询请扫描微信公众号</p>
        </div>
    </div>
</div>

javascript代码:

/*
 * 洋腔洋调英语    公用函数   common.xxx(obj/str);
 */

void function(undefined){  
	//全局配置
	var common = {
		showModal: function(key){ //首页显示隐藏 客服+微信弹窗
			var ui = {
				modals: document.querySelector(".msg-modals"),
				kefubtn: document.querySelector(".kefu-btn"),
				kefumodal: document.querySelector(".kefu-modal"),
				wxbtn: document.querySelector(".weixin-btn"),
				wxmodal: document.querySelector(".wx-modal"),
			}
			switch (key){	
				case 0:
					var timer = setTimeout(function(){
						ui.modals.style.display = "none";
						ui.kefubtn.className = "msg-btn kefu-btn";
						ui.wxbtn.className = "msg-btn weixin-btn";	
						ui.kefumodal.style.display = "none";
						ui.kefumodal.style.animation = "cui-scale-out .15s ease-out forwards";
						ui.wxmodal.style.display = "none";
						ui.wxmodal.style.animation = "cui-scale-out .15s ease-out forwards";
						clearTimeout(timer);
					},400);
					break;
				case 1:
					ui.modals.style.display = "block";
					ui.kefubtn.className = "msg-btn kefu-btn active";
					ui.wxbtn.className = "msg-btn weixin-btn";			
					ui.kefumodal.style.display = "block";
					ui.kefumodal.style.animation = "cui-scale-in .15s ease-out forwards";
					ui.wxmodal.style.display = "none";
					ui.wxmodal.style.animation = "cui-scale-out .15s ease-out forwards";
					break;
				case 2:
					ui.modals.style.display = "block";
					ui.kefubtn.className = "msg-btn kefu-btn";
					ui.wxbtn.className = "msg-btn weixin-btn active";
					ui.wxmodal.style.display = "block";
					ui.wxmodal.style.animation = "cui-scale-in .15s ease-out forwards";
					ui.kefumodal.style.display = "none";
					ui.kefumodal.style.animation = "cui-scale-out .15s ease-out forwards";
					break;			
				default:
					break;
			}
		}
	}
	var Global;
    Global = (function(){ return this || (0, eval)('this'); }());
    if (typeof module !== "undefined" && module.exports) 
    {
        module.exports = common;
    } 
    else if (typeof define === "function" && define.amd) 
    {
        define(function(){return common;});
    } 
    else 
    {
        !('common' in Global) && (Global.common = common);
    }	
}();

css代码:

.msg{ position: fixed; top: -webkit-calc((100vh - 141px) / 2); top: calc((100vh - 141px) / 2);right: 30px;z-index: 2;}
.msg-btns{width: 70px; height: 141px;}
.msg-btn{width: 100%; height: 70px;background: rgba(0,0,0,.2);  text-align: center;}
.msg-btn.kefu-btn{margin-bottom: 1px;}
.msg-btn.active{background: rgba(0,0,0,.3);}
.msg-btn:hover{cursor: pointer;}
.msg-btn img{width: 40px; margin: 15px;}
.msg-modals{width: 230px; height: 234px; display: none; position: absolute;  top: -webkit-calc((100% - 234px) / 2); top: calc((100% - 234px) / 2); right: 70px;}
.msg-modal{width: 210px; height: 234px; display: none; background: #FFF; padding: 10px; box-sizing: border-box; box-shadow: 0 0 2px rgba(100,100,100,.5); border-radius: 3px; position: relative;}
.msg-modal:after{content: ''; width: 15px; height: 15px; background: #fff; border-top: 1px solid rgba(150,150,150,.3); border-right: 1px solid rgba(150,150,150,.3); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; right: -7.5px; top: -webkit-calc((100% - 15px) / 2); top: calc((100% - 15px) / 2);}
.wx-modal img{width: 100%;}
.wx-modal p{width: 100%; line-height: 30px; text-align: center; font-size: 14px; color: #909090;}
.wx-modal:after{ top: -webkit-calc((100% - 15px) / 2 + 35px); top: calc((100% - 15px) / 2 + 35px);}
.kefu-modal img{width: 100%; margin: 25px 0;}
.kefu-modal:after{ top: -webkit-calc((100% - 15px) / 2 - 35px); top: calc((100% - 15px) / 2 - 35px);}
相关标签: web前端