一个不错的渐显菜单

2024-11-28 16:04:27

由于此菜单不易灵活改动，图片量又大，要改栏目和增删栏目特麻烦，得须改图片。
       因对本人对此菜单做了大量改动，最终达到的效果是一样
       原网站那个菜单加上图片有80多k呢，经修改过后的菜单加上图片大小只有4k左右，改了过后是不是小了很多呢。
       改动后的优点，便于修改栏目名称，和增删栏目，图片量减少，无论多少栏目只需两张图片。
       熟悉js的人还可以把它改得更简单方便呢，不过我对js还不够了解，所以就等高手改更简单的效果吧！
补充一点: 这个效果在FF下不能实现,其它浏览器,我也没有测试,只在IE6.0下测试通过.

nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}
clearTimeout(nereidFadeTimers[object.sourceIndex]);
diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}

首页

关于我们

网站介绍

服务项目

成功案例

联系我们

本站论坛

English

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

一个不错的渐显菜单

由于此菜单不易灵活改动,图片量又大,要改栏目和增删栏目特麻烦,得须改图片. 因对本人对此菜单做了大量改动,最终达到的效果是一样原网站那个菜单加上图片有80多k呢,经修改过后的菜单加上图片大小只有4k左右,改了过后是不是小了很多呢. 改动后的优点,便于修改栏目名称,和增删栏目,图片量减少,无论多少栏目只需两张图片. 熟悉js的人还可以把它改得更简单方便呢,不过我对js还不够了解,所以就等高手改更简单的效果吧! 补充一点: 这个效果在FF下不
一个不错的动感导航菜单

<style> dl{width:150px;background:#00f url(bottom.gif) no-repeat left bottom;color:#fff;padding-bottom:5px;} dt{background:#00f url(top.gif) no-repeat top left;padding:10px 10px 10px 20px;font:14px/1.5em arial;border-bottom:1px solid #fff;} dd{margi
jquery简单实现带渐显效果的选项卡菜单代码

本文实例讲述了jquery简单实现带渐显效果的选项卡菜单代码.分享给大家供大家参考.具体如下: 带渐显效果的选项卡菜单,使用了jQuery共同完成的效果,鼠标点击选项卡之后,出现渐变(淡入淡出效果),让网页看上去更生动. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-cha-style-tab-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
一个简单的js渐显(fadeIn)渐隐(fadeOut)类

要兼容IE(element.style.filter = 'alpha(opacity=value)')和非IE(element.style.opacity=value)就可以了.另,还要注意,非IEopaciy的值是0~1之间,IE是1-100. 下面,贴代码: 复制代码代码如下: /** * @projectDescription 动画(渐显.渐隐)类 * /** * @projectDescription KINGKIT UI * @date 2010-6-1 * @author Kit
js模拟滤镜的图片渐显效果

无标题文档 #pshow{margin:auto;width:180px;height:137px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);} /*ImageChange Start*/ var changeTime=2000,gradechangeTime=100,changeSpeed=10,imageCounter=4,nowImage,startOpacity; var imageLink=new Array
原生JS实现图片网格式渐显、渐隐效果

先给出效果图: 写的小组件支持图片的渐显.渐隐,并且可以是有序.随机两种方式. 我采用的原型是属性写在构造函数内,方法写在原型对象内.方法写构造函数内有个问题,就是每次调用这个方法就相当于重新实例化一次,举个粟子: 实现网格效果的原理上是将读取图片的宽高,按照设定的参数,分成等高宽的网格(我用的span标签表示的网格),网格利用定位铺满整个图片,每个网格的背景图都是原图片,原理同sprite,利用background-position属性改变显示区域.接下来就是按照设定的顺序实现渐显或渐隐.渐显
如何在Android中实现渐显按钮的左右滑动效果

先看下运行效果: 程序结构: MainActivity文件中代码: 复制代码代码如下: package com.android.buttonpageflipper;import android.app.Activity;import android.graphics.PixelFormat;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.view.Gra
vue实现导航标题栏随页面滚动渐隐渐显效果

项目开发中导航栏随页面滚动渐隐渐显这一功能还是较为常用的,下面作一个用vue实现此功能的代码分享. 1. 为导航栏元素style属性用v-bind绑定data数据"opacityStyle". <div class="header" :style="opacityStyle"> 景点详情 //内容我就简约了,实际开发以需求为准 </div> 2. data中定义opacityStyle,数据内容是opacity透明度属性,
一个不错的js html页面倒计时可精确到秒

一个不错的js html页面倒计时可精确到秒,很简单,但和实用 <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <DIV id="CountMsg" class="HotDate"> <span id="t_d">00天</span>
一个不错的shell 脚本教程入门级

建立一个脚本 Linux中有好多中不同的shell,但是通常我们使用bash (bourne again shell) 进行shell编程,因为bash是免费的并且很容易使用.所以在本文中笔者所提供的脚本都是使用bash(但是在大多数情况下,这些脚本同样可以在 bash的大姐,bourne shell中运行). 如同其他语言一样,通过我们使用任意一种文字编辑器,比如nedit.kedit.emacs.vi 等来编写我们的shell程序. 程序必须以下面的行开始(必须方在文件的第一行): #!/b

一个不错的渐显菜单

相关推荐

随机推荐