18168733823 在线客服 意见反馈 返回顶部
行业动态 技术分享

原生JS仿网页右下角广告窗口

2019-12-25 分享

jQuery调用版本:1.11.3

效果展示

页面

<div id="div">
   <div id="close" onclick="closeWin()">×</div>
</div>

css

#div {
	width:300px;
	height:250px;
	background-color:red;
	position:fixed;
	bottom:-250px;
	right:0px;
	transition:all 1.5s ease;
}
#close {
	width:20px;
	height:20px;
	background-color:green;
	text-align:center;
	line-height:20px;
	float:right;
	margin:10px;
	cursor:pointer;
}

JS

var div;
window.onload = function() {
    div = document.getElementById("div");
    div.style.bottom = "0px"
}

function closeWin() {
    var close = document.getElementById("close");
    if (close.innerText == "×") {
        close.innerText = "";
        div.style.bottom = "-200px"
    } else {
        close.innerText = "×";
        div.style.bottom = "0px"
    }
}
在线咨询
Copyright © 2019 江苏如斯镁科技有限公司 版权所有 苏ICP备19052370号-3   友情链接: 在线商城 网站地图