如题 这种效果怎么做 就像淘宝网首页上有一个新欢点击出现的效果，最好把这种效果完全拷贝下来
有大神知道怎么做的吗
打开网页弹出一个全屏的层，然后点击一下就隐藏
答案:1 悬赏:0 手机版
解决时间 2021-01-03 16:18
- 提问者网友：两耳就是菩提
- 2021-01-02 22:09
最佳答案
- 五星知识达人网友：平生事
- 2021-01-06 23:15
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>....</title>
<style>
div#mask{width:100%;height:100%;background:#000;position:fixed;left:0;top:0;z-index:999}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('mask');
oDiv.onclick=function(){
var iHeight=css(oDiv,'height');
var iTarget=-iHeight;
var timer=null;
timer=setInterval(function(){
var iTop=css(oDiv,'top');
var iSpeed=Math.floor((iTarget-iTop)/8);
var t=iTop+iSpeed;
if(iTop<=iTarget){
clearInterval(timer);
}else{
oDiv.style.top=t+'px';
}
},10);
}
}
function css(obj,attr){
var result;
if(obj.currentStyle){
result=obj.currentStyle[attr];
}else{
result=getComputedStyle(obj,false)[attr];
}
return parseInt(result);
}
</script>
</head>
<body>
<p>正文</p>
<div id="mask"></div>
</body>
</html>看看这个适不适合你，我测试过了。
<html>
<head>
<meta charset="utf-8" />
<title>....</title>
<style>
div#mask{width:100%;height:100%;background:#000;position:fixed;left:0;top:0;z-index:999}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('mask');
oDiv.onclick=function(){
var iHeight=css(oDiv,'height');
var iTarget=-iHeight;
var timer=null;
timer=setInterval(function(){
var iTop=css(oDiv,'top');
var iSpeed=Math.floor((iTarget-iTop)/8);
var t=iTop+iSpeed;
if(iTop<=iTarget){
clearInterval(timer);
}else{
oDiv.style.top=t+'px';
}
},10);
}
}
function css(obj,attr){
var result;
if(obj.currentStyle){
result=obj.currentStyle[attr];
}else{
result=getComputedStyle(obj,false)[attr];
}
return parseInt(result);
}
</script>
</head>
<body>
<p>正文</p>
<div id="mask"></div>
</body>
</html>看看这个适不适合你，我测试过了。
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
点此我要举报以上问答信息
大家都在看
推荐资讯