js特效-渐现菜单

最新推荐文章于 2024-07-20 10:36:53 发布

heaven_ck

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量355

点赞数

分类专栏： Javascript 文章标签： function menu timer javascript filter list

本文链接：https://blog.csdn.net/heaven_ck/article/details/5955185

版权

Javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

heaven_ck

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js特效-渐现菜单

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(){
复制链接

扫一扫