61,119
社区成员
发帖
与我相关
我的任务
分享(求助)如何实现在点击某个按钮后在“本页面”拉出一个新页面？
今天浏览奶牛快传的时候，发现它们的网站设计得非常好看！体验过程中发现在页面中点击“登录/注册”按钮后没有跳转到另一个页面，而是在本页面上从右边“拉”出了一个新的区域页。请问这个效果是如何实现的呢？请各位大神详细解答，感激不尽！
...全文
请发表友善的回复…
发表回复
sha虫剂 2021-03-18
- 打赏
- 举报
这个就是一个弹窗，可以手动自己写，也可以用各种ui库 在各种UI库中基本都叫做dialog弹窗
幻想212 2021-03-18
- 打赏
- 举报
下拉菜单试试看
浅影歌年 2021-03-18
- 打赏
- 举报
是弹窗的效果，写弹窗
YangQingYun_ 2021-03-15
- 打赏
- 举报
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>222</title>
<style>
html, body{width: 100%; height: 100%; overflow: hidden;}
#div1 {width:100px; height:200px; background:red; top:300px; right:-100px; position:absolute;}
#div1 span{width:20px; height:60px; line-height:20px; top:70px; right:100px; background:yellow; text-align:center; position:absolute;}
</style>
</head>
<body>
<div id="div1"><span>111</span></div>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
oDiv.style.right = '-100px';
oDiv.onmouseover = function () {
startMove(1);
};
oDiv.onmouseout = function () {
startMove(0);
}
};
var timer = null;
function startMove(iTarget) {
var oDiv = document.getElementById('div1');
var speed = 1;
clearInterval(timer);
timer = setInterval(function () {
if(iTarget){
oDiv.style.right = parseFloat(oDiv.style.right) + speed + 'px';
if(parseFloat(oDiv.style.right) >= 0){
oDiv.style.right = '0';
window.clearInterval(timer);
}
}else {
oDiv.style.right = parseFloat(oDiv.style.right) - speed + 'px';
if(parseFloat(oDiv.style.right) <= -100){
oDiv.style.right = '-100px';
window.clearInterval(timer);
}
}
}, 10);
}
</script>
</body>
</html>
你看看这个效果是不是你需要的理解改进下
Proud lion 2021-03-15
- 打赏
- 举报
应该只是一个弹层 ，你可以找个ui框架有例子的很简单
