右侧逐渐展开菜单-JS特效-爱易网页

右侧逐渐展开菜单

日期：2014-05-18　浏览次数：20573 次

欢迎光临爱易网网页脚本特效中心，点击运行按钮演示特效：

以下是程序代码

脚本说明:
把如下代码加入<body>区域中
<script>
var menus    = new Array();
var isShow   = new Boolean(); 
isShow=false;
var isdown   = new Boolean();
isdown=false;
var srcel; 
var fromel;  
var toel; 
var usestatus=false;
var thestatus="";
var popTimer = 0;
menucolor='#EEBF99';fontcolor='MenuText';menuoutcolor='#F3D5B8';menuincolor='#F8E8D6';menuoutbordercolor='#FCF3EF';menuinbordercolor='#000000';midoutcolor='#F2D0B5';midincolor='#9E7F66';menuovercolor='#E80005';menuunitwidth=160;menuitemwidth=160;menuheight=180;menuwidth='160';menuadjust=0;
menualign='center';leftchar='(无)';rightchar='(无)';fonts='font-family: 宋体; font-size: 9pt; color: MenuText; ';cursor='default';
var fadeSteps = 5;
var fademsec = 20;
var fadeArray = new Array();
function fade(el, fadeIn, steps, msec) {
	if (steps == null) steps = fadeSteps;
	if (msec == null) msec = fademsec;
	if (el.fadeIndex == null)
		el.fadeIndex = fadeArray.length;
	fadeArray[el.fadeIndex] = el;
	if (el.fadeStepNumber == null) {
		if (el.style.visibility == "hidden")
			el.fadeStepNumber = 0;
		else
			el.fadeStepNumber = steps;
		if (fadeIn)
			el.style.filter = "Alpha(Opacity=0)";
		else
			el.style.filter = "Alpha(Opacity=100)";
	}
	window.setTimeout("repeatFade(" + fadeIn + "," + el.fadeIndex + "," + steps + "," + msec + ")", msec);
}
function repeatFade(fadeIn, index, steps, msec) {	
	el = fadeArray[index];
	
	c = el.fadeStepNumber;
	if (el.fadeTimer != null)
		window.clearTimeout(el.fadeTimer);
	if ((c == 0) && (!fadeIn)) {
		el.style.visibility = "hidden";
		return;
	}
	else if ((c==steps) && (fadeIn)) {
		el.style.filter = "";
		el.style.visibility = "visible";
		return;
	}
	else {
		(fadeIn) ? 	c++ : c--;
		el.style.visibility = "visible";
		el.style.filter = "Alpha(Opacity=" + 100*c/steps + ")";
		el.fadeStepNumber = c;
		el.fadeTimer = window.setTimeout("repeatFade(" + fadeIn + "," + index + "," + steps + "," + msec + ")", msec);
	}
}
function popOut() {
popTimer = setTimeout('allhide()', 1000);
}
function getReal(el, type, value) {
	temp = el;
	while ((temp != null) && (temp.tagName != "BODY")) {
		if (eval("temp." + type) == value) {
			el = temp;
			return el;
		}
		temp = temp.parentElement;
	}
	return el;
}

function MenuRegister(menu) 
{
  menus[menus.length] = menu
  return (menus.length - 1)
}
function MenuItem(caption,command,target,isline,statustxt){
	this.caption=caption;
	this.command=command;
	this.target=target;
	this.isline=isline;
	this.statustxt=statustxt;
}

function Menu(caption,command,target){
	this.items = new Array();
	this.caption=caption;
	this.command=command;
	this.target=target;
	this.id=MenuRegister(this);
}
function MenuAddItem(item)
{
  this.items[this.items.length] = item
  item.parent = this.id;
  this.children=true;
}

Menu.prototype.addItem = MenuAddItem;
function toout(src){
src.style.borderLeftColor=menuoutbordercolor;
src.style.borderRightColor=menuinbordercolor;
src.style.borderTopColor=menuoutbordercolor;
src.style.borderBottomColor=menuinbordercolor;
src.style.backgroundColor=menuoutcolor;
src.style.color=menuovercolor;
}
function toin(src){
src.style.borderLeftColor=menuinbordercolor;
src.style.borderRightColor=menuoutbordercolor;
src.style.borderTopColor=menuinbordercolor;
src.style.borderBottomColor=menuoutbordercolor;
src.style.backgroundColor=menuincolor;
src.style.color=menuovercolor;
}
function nochange(src){
src.style.borderLeftColor=menucolor;
src.style.borderRightColor=menucolor;
src.style.borderTopColor=menucolor;
src.style.borderBottomColor=menucolor;
src.style.backgroundColor=menucolor;
src.style.color=fontcolor;
}
function allhide(){
	for(var nummenu=0;nummenu<menus.length;nummenu++){
		var themenu=document.all['menu'+nummenu]
		var themenudiv=docu</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="482">下一篇：点击按钮后延迟跳转</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34223' title='估值增长9.8% 阿里IPO前市值达2450亿美元' target="_blank">
                        估值增长9.8% 阿里IPO前市值达2450亿美元</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34407' title='工商总局开查电商“七日退货”' target="_blank">
                        工商总局开查电商“七日退货”</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34452' title='安全服务机构：公布2014年度最糟糕的25个密码' target="_blank">
                        安全服务机构：公布2014年度最糟糕的25个密码</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34406' title='唯品会荣登“最贵中概股”的欢喜与哀愁' target="_blank">
                        唯品会荣登“最贵中概股”的欢喜与哀愁</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34220' title='虚拟运营商流量不清零吸引用户 盈利待明' target="_blank">
                        虚拟运营商流量不清零吸引用户 盈利待明</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10835' title='传诺基亚5月14日发布会推出Lumia 950' target="_blank">
                        传诺基亚5月14日发布会推出Lumia 950</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34439' title='国内首个大数据系列指数今日发布' target="_blank">
                        国内首个大数据系列指数今日发布</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10842' title='诺基亚仍是第二大手机商：功用机有利可图' target="_blank">
                        诺基亚仍是第二大手机商：功用机有利可图</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10815' title='中移动业绩增长趋缓 目光转向海外市场' target="_blank">
                        中移动业绩增长趋缓 目光转向海外市场</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2026 爱易网页 当前在线：4005人　
        网站在15时57分23秒内访问总人数：399817人
    当前 42.39%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>