js特效-渐现菜单

来源：互联网发布：mac打印色彩调整图案编辑：程序博客网时间：2024/04/30 01:20

js源码filter.js:

// JavaScript Document
/**
* @function filter渐现显示
* @direction objId显示块的id,speed速度
*/
function filter(objId, speed){
var effect = this;
var obj = null;
var speed = speed ? speed : 10;
var timer = null;
var opacity = 0;
var init = function(){
  obj = document.getElementById(objId);
  if(!obj.style.zIndex)
   obj.style.zIndex = 1000;
  obj.style.opacity = opacity;
  obj.style.filter = "alpha(opacity:"+ opacity+");";
  obj.style.visibility = "hidden";
};
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){
  opacity = opacity + speed > 100 ? 100 : opacity + speed;
  obj.style.visibility = "visible";
  obj.style.display = "block";
  if(opacity >= 100){
   obj.style.opacity = "";
   obj.style.filter = "";
   clearInterval(timer);
   if(func)
    func();
  }
  else{
   obj.style.opacity = opacity/100;
   obj.style.filter = "alpha(opacity:"+ opacity+")";
  }
};
this.animateHide = function(func){
  opacity = opacity - speed < 0 ? 0 : opacity - speed;
  if(opacity > 0){
   obj.style.opacity = opacity/100;
   obj.style.filter = "alpha(opacity:"+ opacity+");";
  }
  else{
   obj.style.display="none";
   obj.style.opacity = "";
   obj.style.filter = "";
   clearInterval(timer);
   if(func)
    func();
  }
};
init();
return this;
};

测试代码:

li{
list-style-type:none;
}
</style>
</head>

</div>
<div id="text">
</div>
</body>
<script language="javascript" src="filter.js"></script>
<script language="javascript">
var clip_menu = menu("menu_title", "menu_list", "clip", "up");
function menu(menuId, menuListId, effect, direction){
var effectObj = null;
var menu = null;
var init = function(){
  menu = document.getElementById(menuId);
  effectObj = filter(menuListId, 10);
  menu.parentNode.onmouseover = effectObj.show;
  menu.parentNode.onmouseout = effectObj.hide;
};
init();
return this;
};
</script>
</html>