当用户的鼠标经过div层会弹出展开一个图层，鼠标移开后又隐藏起来，伸缩过程都带缓冲特效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>鼠标感应图层带缓冲伸缩弹出显示特效_武鸣人</title>
<script language="javascript">
var flag=0;
function wuming_ren(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);
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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)
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function showDiv(){
var ele = document.getElementById("www_wuming_ren");
clearInterval(bw1);
clearInterval(bw2);
ele.style.display = "block";
ele.style.height = 335 + "px";
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div onmouseover="wuming_ren('www_wuming_ren')" onmouseout="closeW('www_wuming_ren')" style="position:absolute;background: #FF66FF;left:200px;top:44px;width:149px;height:45px;">武鸣人提示您：把您的鼠标放到这里</div>
<div id="www_wuming_ren" onmouseover="showDiv()" onmouseout="closeW('www_wuming_ren')" style="position:absolute;background:aqua;left:200px;overflow:hidden;top:100px;width:349px;display:none;">武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢！www.wuming.ren</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处