js特效-卷动菜单、窗口

js源码blind.js:

// JavaScript Document
/**
 * @function 向一边显示
 * @direction objId显示块id,direction方向(up,down,left,right)
 */
function blind(objId, direction, speed, destorySign){
 var effect = this;
 var obj = null;
 var objArr = new Array();
 var direction = direction;
 var speed = speed ? speed : 20;
 var timer = null;
 var left = 0;
 var top = 0;
 var width = 0;
 var height = 0;
 var destorySign = destorySign ? destorySign : false;
 var init = function(){
  obj = document.getElementById(objId);
  obj.style.position = "absolute";
  obj.style.display = "block";
  top = obj.offsetTop;
  left = obj.offsetLeft;
  obj.style.top = top + "px";
  obj.style.left = left + "px";
  obj.style.margin = "0px";
  width = obj.offsetWidth;
  height = obj.offsetHeight;
  var temp = obj.cloneNode(true);
  temp.setAttribute('id', '');
  var div = document.createElement("div");
  div.style.width = width + "px";
  div.style.height = height + "px";
  
  if(direction == "up"){
   div.style.height = "0px";
   div.style.top = top+"px";
   div.style.left = left + "px";
   
   temp.style.left = "0px";
   temp.style.top = "0px";
  }
  else if(direction == "down"){
   div.style.height = "0px";
   div.style.top = top + height + "px";
   div.style.left = left + "px";
   
   temp.style.left = "0px";
   temp.style.top = 0-height+"px";
  }
  else if(direction == "left"){
   div.style.width = "0px";
   div.style.left = left+"px";
   div.style.top = top + "px";
   
   temp.style.left = "0px";
   temp.style.top = "0px";
  }
  else{
   div.style.width = "0px";
   div.style.left = left+width+"px";
   div.style.top = top + "px"; 
   
   temp.style.left = 0-width+"px";
   temp.style.top = "0px";
  }
  div.style.position = "absolute";
  div.style.overflow = "hidden";
  div.style.display = "none";
  div.appendChild(temp);
  objArr.push(div);
  obj.parentNode.appendChild(div);
  objArr[0].style.zIndex = 1000;
  obj.style.zIndex = 1000;
  obj.style.display = "none";
 };
 this.show = function(func){
  clearInterval(timer);
  timer = setInterval(function(){effect.animateShow(func);}, 50);
 };
 this.hide = function(func){
  clearInterval(timer);
  timer = setInterval(function(){effect.animateHide(func);}, 50);
 };
 this.animateShow = function(func){
  objArr[0].style.display = "block";
  if(direction == "up"){
   if(objArr[0].offsetHeight + speed <= height){
    objArr[0].style.height = objArr[0].offsetHeight + speed + "px";
    objArr[0].style.top = top+"px";
    objArr[0].childNodes[0].style.top = "0px";
   }
   else{
    objArr[0].style.height = height + "px";
    objArr[0].style.top = top+"px";
    objArr[0].childNodes[0].style.top = "0px";
    
    objArr[0].style.display = "none";
    obj.style.display = "block";
    clearInterval(timer);
    
    if(func)
     func();
   }
  }
  else if(direction == "down"){
   if(objArr[0].offsetHeight + speed <= height){
    objArr[0].style.height = objArr[0].offsetHeight + speed + "px";
    objArr[0].style.top = objArr[0].offsetTop - speed +"px";
    objArr[0].childNodes[0].style.top = objArr[0].childNodes[0].offsetTop + speed + "px";
   }
   else{
    objArr[0].style.height = height + "px";
    objArr[0].style.top = top+"px";
    objArr[0].childNodes[0].style.top =  "0px";
    
    objArr[0].style.display = "none";
    obj.style.display = "block";
    clearInterval(timer);
    
    if(func)
     func();
   }
  }
  else if(direction == "left"){
   if(objArr[0].offsetWidth + speed <= width){
    objArr[0].style.width = objArr[0].offsetWidth + speed + "px";
    objArr[0].style.left = left+"px";
    objArr[0].childNodes[0].style.left = "0px";
   }
   else{
    objArr[0].style.width = width + "px";
    objArr[0].style.left = left+"px";
    objArr[0].childNodes[0].style.left = "0px";
    
    objArr[0].style.display = "none";
    obj.style.display = "block";
    clearInterval(timer);
    
    if(func)
     func();
   }
  }
  else{
   if(objArr[0].offsetWidth + speed <= width){
    objArr[0].style.width = objArr[0].offsetWidth + speed + "px";
    objArr[0].style.left = objArr[0].offsetLeft - speed + "px";
    objArr[0].childNodes[0].style.left = objArr[0].childNodes[0].offsetLeft + speed + "px";
   }
   else{
    objArr[0].style.width = width + "px";
    objArr[0].style.left = left+"px";
    objArr[0].childNodes[0].style.left = "0px";
    
    objArr[0].style.display = "none";
    obj.style.display = "block";
    clearInterval(timer);
    
    if(func)
     func();
   }
  }
 };
 this.animateHide = function(func){
  objArr[0].style.display = "block";
  obj.style.display = "none";
  if(direction == "up"){
   if(objArr[0].offsetHeight - speed >= 0){
    objArr[0].style.height = objArr[0].offsetHeight - speed + "px";
    objArr[0].style.top = top+"px";
    objArr[0].childNodes[0].style.top = "0px";
   }
   else{
    objArr[0].style.height = "0px";
    objArr[0].style.top = top+"px";
    objArr[0].childNodes[0].style.top = "0px";
    
    objArr[0].style.display = "none";
    obj.style.display = "none";
    clearInterval(timer);
    
    this.destory();
    if(func)
     func();
   }
  }
  else if(direction == "down"){
   if(objArr[0].offsetHeight - speed >= 0){
    objArr[0].style.height = objArr[0].offsetHeight - speed + "px";
    objArr[0].style.top = objArr[0].offsetTop + speed +"px";
    objArr[0].childNodes[0].style.top = objArr[0].childNodes[0].offsetTop - speed + "px";
   }
   else{
    objArr[0].style.height = "0px";
    objArr[0].style.top = top+height+"px";
    objArr[0].childNodes[0].style.top = 0-height+"px";
    
    objArr[0].style.display = "none";
    obj.style.display = "none";
    clearInterval(timer);
    
    this.destory();
    if(func)
     func();
   }
  }
  else if(direction == "left"){
   if(objArr[0].offsetWidth - speed >= 0){
    objArr[0].style.width = objArr[0].offsetWidth - speed + "px";
    objArr[0].style.left = left+"px";
    objArr[0].childNodes[0].style.left = "0px";
   }
   else{
    objArr[0].style.width = "0px";
    objArr[0].style.left = left+"px";
    objArr[0].childNodes[0].style.left = "0px";
    
    objArr[0].style.display = "none";
    obj.style.display = "none";
    clearInterval(timer);
    
    this.destory();
    if(func)
     func();
   }
  }
  else{
   if(objArr[0].offsetWidth - speed >= 0){
    objArr[0].style.width = objArr[0].offsetWidth - speed + "px";
    objArr[0].style.left = objArr[0].offsetLeft + speed+"px";
    objArr[0].childNodes[0].style.left = objArr[0].childNodes[0].offsetLeft - speed + "px";
   }
   else{
    objArr[0].style.width = "0px";
    objArr[0].style.left = left+width+"px";
    objArr[0].childNodes[0].style.left = 0-width+"px";
    clearInterval(timer);
    
    this.destory();
    if(func)
     func();
   }
  }
 };
 this.destory  = function(){
  if(destorySign){
   var parent = obj.parentNode;
   for(var i = 0; i < objArr.length; i++){
    parent.removeChild(objArr[i]);
   }
   obj.removeAttribute("style");
  }
 };
 init();
 return this;
};

 

测试源码：

<!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=utf-8" />
<title>blind</title>
<style>
*{
 padding:0px;
 margin:auto;
}
#menu{
 width:100px;
}
#menu_titile{
 border:1px #000000 solid;
 width:100px;
}
.menu_list{
 border:1px #CCCCCC solid;
 width:100px;
 background:#FFF;
}
li{
 list-style-type:none;
}
</style>
</head>

<body>
<div id="menu">
 <div id="menu_title">menu</div>
    <div id="menu_list" class="menu_list">
     <ul>
         <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>
            <li>menu4</li>
            <li>menu5</li>
        </ul>
    </div>
</div>
<div>
</div>
<div id="text">
</div>
</body>
<script language="javascript" src="blind.js"></script>
<script language="javascript">
var clip_menu = menu("menu_title", "menu_list", "clip", "right");
function menu(menuId, menuListId, effect, direction){
 var effectObj = null;
 var menu = null;
 var init = function(){
  menu = document.getElementById(menuId);
  effectObj = blind(menuListId, direction, 10);
  menu.parentNode.onmouseover = effectObj.show;
  menu.parentNode.onmouseout = effectObj.hide;
 };
 init();
 return this;
};
</script>