1顶

js控制图层展开与隐藏特效

稿源：互联网 2022-04-02 21:40:51 点击： 4489 撤稿纠错

js实现图层隐藏与展开特效，点击时弹出图层，再次点击隐藏。

以下讨论的是和控制展开隐藏相关的js控制图层展开与隐藏特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长特效,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,打造一流网页特效站" />
<title>网页特效 js控制图层展开与隐藏特效 站长特效网</title>
<style type="text/css">
#show{
 margin:10px;
}
.list{
 position:relative;;
 background:#eee;
 border:1px #ccc solid;
 margin:10px;
 height:30px;
 width:100px;
 cursor:pointer;
}
.listShow{
 position:relative;
 background:#eff;
 border:1px #ddd solid;
 margin:10px;
 height:30px;
 width:100px;
 cursor:pointer ;
}
.comment{
 position:absolute;
 left:0;
 display:none;
 position:absolute;
 border:1px #ccc solid;
 background:#fee;
 width:200px;
 height:200px;
 overflow:hidden;
 z-index:100;
}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div class="" id="show">0</div>
<div class="list" id="list1">站长特效一号
 <div class="comment" id="comment1">站长特效网，以质量为核心，以实用为目的，打造一流网页特效站！</div>
</div>
<div class="list" id="list2">站长特效二号
 <div class="comment" id="comment2">站长特效网，以质量为核心，以实用为目的，打造一流网页特效站！</div>
</div>
<div class="list" id="list3">站长特效三号
 <div class="comment" id="comment3">站长特效网，以质量为核心，以实用为目的，打造一流网页特效站！</div>
</div>
<div class="list" id="list4">站长特效四号
 <div class="comment" id="comment4">站长特效网，以质量为核心，以实用为目的，打造一流网页特效站！</div>
</div>
<div class="list" id="list5">站长特效五号
 <div class="comment" id="comment5">站长特效网，以质量为核心，以实用为目的，打造一流网页特效站！</div>
</div>
<div class="list" id="list6">站长特效六号
 <div class="comment" id="comment6">站长特效网，以质量为核心，以实用为目的，打造一流网页特效站！</div>
</div>
<script language="javascript">
    var zindex=0;
 function $id(id){
  return document.getElementById(id);
 }
 var Bind = function(object,fun){
  var args = Array.prototype.slice.call(arguments).slice(2);
  return function(){
   return fun.apply(object,args);
  }
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
 function addEventHandler(oTarget, sEventType, fnHandler){
   if(oTarget.addEventListener){oTarget.addEventListener(sEventType, fnHandler, false);}
   else if(oTarget.attachEvent){oTarget.attachEvent('on' + sEventType, fnHandler);}
   else{oTarget['on' + sEventType] = fnHandler;}
 }
 var Shower=function(){
  this.list=null;
  this.comment=null;
  this.moveLeft=80;   //弹出div的水平偏移距离
  this.moveTop=20; //弹出div的竖直偏移距离
  this.height=150; //弹出div的高
  this.width=250;  //弹出div的宽
  this.time=800;  //弹出div所用时间
  this.init=function(lisObj,comObj){
   this.list=lisObj;
   this.comment=comObj;
   var _this=this;
   this._fnMove=Bind(this,this.move);
   (function(){
    var obj=_this;
    addEventHandler(obj.list,"click",obj._fnMove);
   })();
  };
  this.move=function(){
   var _this=this;
    var w=0; //水平偏移
    var h=0; //竖直偏移
    var height=0; //弹出div的高
    var width=0;  //弹出div的宽
    var t=0;
    var startTime = new Date().getTime();//开始执行的时间
    if(!_this.comment.style.display||_this.comment.style.display=="none"){
     _this.comment.style.display="block";
     _this.comment.style.height=0+"px";
     _this.comment.style.width=0+"px";
     _this.list.style.zIndex=++zindex;
     _this.list.className="listShow";
     var comment=_this.comment.innerHTML;
     _this.comment.innerHTML="";  //去掉显示内容
     var timer=setInterval(function(){
      var newTime = new Date().getTime();
      var timestamp = newTime - startTime;
      _this.comment.style.left=Math.ceil(w)+"px";
      _this.comment.style.top=Math.ceil(h)+"px";
      _this.comment.style.height=height+"px";
      _this.comment.style.width=width+"px";
      t++;
      var change=(Math.pow((timestamp/_this.time-1), 3) +1); //根据运行时间得到基础变化量
      w=_this.moveLeft*change;
      h=_this.moveTop*change;
      height=_this.height*change;
      width=_this.width*change;
      $id("show").innerHTML=w;
       if(w>_this.moveLeft){
        clearInterval(timer);
        _this.comment.style.left=_this.moveLeft+"px";
        _this.comment.style.top=_this.moveTop+"px";
        _this.comment.style.height=_this.height+"px";
        _this.comment.style.width=_this.width+"px";
         _this.comment.innerHTML=comment; //回复显示内容
       }
      },1,_this.comment);
    }else{
     _this.hidden();
    }
  }//欢迎来到站长特效网，我们的网址是ww w.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
  this.hidden=function(){
   var _this=this;
   var flag=1;
   var hiddenTimer=setInterval(function(){
      if(flag==1){
        _this.comment.style.height=parseInt(_this.comment.style.height)-10+"px";
      }else{
        _this.comment.style.width=parseInt(_this.comment.style.width)-15+"px";
        _this.comment.style.left=parseInt(_this.comment.style.left)+5+"px";
      }
      if(flag==1 && parseInt(_this.comment.style.height)<10){
       flag=-flag;
      }
      if(parseInt(_this.comment.style.width)<20){
       clearInterval(hiddenTimer);
       _this.comment.style.left="0px";
       _this.comment.style.top="0px";
       _this.comment.style.height="0px";
       _this.comment.style.width="0px";
       _this.comment.style.display="none";
       if(_this.list.style.zIndex==zindex){
        zindex--;
       };
       _this.list.style.zIndex=0;
       _this.list.className="list";
      }
   },1)
  }
 }//欢迎来到站长.特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
 window.onload=function(){ //建立各个菜单对象
  var shower1=new Shower();
  shower1.init($id("list1"),$id("comment1"));
  var shower2=new Shower();
  shower2.init($id("list2"),$id("comment2"));
  var shower3=new Shower();
  shower3.init($id("list3"),$id("comment3"));
  var shower4=new Shower();
  shower4.init($id("list4"),$id("comment4"));
  var shower5=new Shower();
  shower5.init($id("list5"),$id("comment5"));
  var shower6=new Shower();
  shower6.init($id("list6"),$id("comment6"));
 }
</script>
</body>
</html>

关于js控制图层展开与隐藏特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010123066680.shtml方便下次再访问哦。

·上一篇： 当前窗口纵向翻页切换显示特效
·下一篇： 可任意拖拽边框的图层特效兼容所有浏览器

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

js控制图层展开与隐藏特效

文章分类LIST >>返回首页

最新游戏

最新新闻