JS+CSS漂亮的滑出提示层

最新推荐文章于 2022-07-07 16:03:27 发布

u011886490

最新推荐文章于 2022-07-07 16:03:27 发布

阅读量839

点赞数

分类专栏：系统运维

本文链接：https://blog.csdn.net/lampzdrj/article/details/10599381

版权

系统运维专栏收录该内容

298 篇文章 0 订阅

订阅专栏

---------------------------------------------------------------------------
<html>
<head>
<title>滑出层</title>
<script>
var flag=0;
function f_s(id){
var obj=document.getElementById(id);
obj.style.display="block";
obj.style.height="1px";

var changeW=function(){
var obj_h=parseInt(obj.style.height);
if(obj_h<=335){
obj.style.height=(obj_h+Math.ceil((335-obj_h)/10))+"px";
}
else{
clearInterval(bw1);
}
}
bw1= setInterval(changeW,1);
if(flag>0){
clearInterval(bw2);
}
}
function closeW(id){
flag++;
var obj=document.getElementById(id);
var closeDiv=function(){

clearInterval(bw1);
var obj_h=parseInt(obj.style.height);
if(obj_h>1){
obj.style.height=(obj_h-Math.ceil(obj_h)/10)+"px";

}
else{
clearInterval(bw2);
obj.style.display="none";
}
}
bw2= setInterval(closeDiv,1);
//alert(flag)
}
function showDiv(){
var ele = document.getElementById("div1");
clearInterval(bw1);
clearInterval(bw2);
ele.style.display = "block";
ele.style.height = 335 + "px";

}
</script>
</head>
<body>
<div οnmοuseοver="f_s('div1')" οnmοuseοut="closeW('div1')" style=" position:absolute;background:black; left: 536px; top: 36px; width: 150px; height: 22px;padding:8px;color:white;font-size:9pt;">详细介绍……</div>
<div id="div1" style="position:absolute;background:aqua;padding:8px;font-size:9pt;left:451px;overflow:hidden;top:68px;width:330px;display:none" οnmοuseοver="showDiv()" οnmοuseοut="closeW('div1')">一年之计在于春，一天之计在于晨，抓紧每一分一秒，努力奋斗……</div& gt;
</body>
</html>