菜单渐渐出现(1)

本文介绍了一种使用JavaScript实现的菜单显示与隐藏效果。通过设置不同的透明度与显示状态,菜单可以在点击链接后逐渐出现或消失,为用户提供平滑的交互体验。此效果基于浏览器的定时器与DOM操作实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


<script type="text/javascript"><!--

var timeout = 20; // 显示速度, 数字越大速度越慢
var alphaplus = 10; // 每次执行增加或减少的透明度

// 使用请调用 clickmenu('对象名称');

function clickmenu(objname) {

var obj = document.getElementById(objname);

if(obj.style.display == 'none') {

obj.filters.alpha.opacity = 0;
obj.style.display = '';
changemenu(objname, true);

} else {

changemenu(objname, false);

}

}

function changemenu(objname, show) {

var obj = document.getElementById(objname);

obj.filters.alpha.opacity += (show ? alphaplus : 0-alphaplus);
if(show && obj.filters.alpha.opacity < 100) window.setTimeout('changemenu(/'' + objname + '/', true)', timeout);

if(!show) {

if(obj.filters.alpha.opacity <= 0) {
obj.style.display = 'none';
} else {
window.setTimeout('changemenu(/'' + objname + '/', false)', timeout);
}

}

}

--></script>

<a href="javascript: clickmenu('menudiv');">显示/隐藏菜单</a><br /><br />

<div id="menudiv" style="border: 1px #ffc5ae solid; filter: alpha(opacity=50); position: absolute; display: none;">菜单内容</div> 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值