`
corangecn
  • 浏览: 60369 次
文章分类
社区版块
存档分类
最新评论

点击显示隐藏菜单,动画效果,半透明,支持所有浏览器

 
阅读更多

演示地址:http://www.corange.cn/demo/3647/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<link href="yiwu/styleG3.css" rel="stylesheet" type="text/css">
<SCRIPT language=javascript 
src="yiwu/ae.js" 
charset=iso-8859-1></SCRIPT>
</HEAD>
<BODY>
<div style="height:100px;"></div>
<DIV class="sideMenu haveBanner">
<BR>
<SCRIPT language=javascript type=text/javascript>

var zConfig={
showConfig:{
width: {to: 532},
opacity: {to: 1 }
},
hiddenConfig:{
width: {to: 0},
opacity: {to: 0 }
},
showTime:1,
hiddenTime:1,
sFireEvent:"click",
oAppliedFunction:YAHOO.util.Easing.easeOutStrong
}
var showAllCategory=new floatDiv();

YUE.on(window,"load",function(){
if(get('MiniMPTitem')){
var fixHeight = get('MiniMPTitem').offsetHeight;

if(fixHeight<320){fixHeight=320;}
get('MinimoreProductTeam').style.height=fixHeight+"px";
get('moreProductTeam').style.height=fixHeight+"px";
get('MinimoreProductMaskIframe').style.height=fixHeight+"px";
get('moreProductTeam').style.display="none";

var xy = [-128,-135];
if(!AE.browse.isIE){xy = [-128,-108]}


var targetXY = YUD.getXY('moreProductTeamBtn');

var midW = YUD.getViewportWidth()/2;
var isLeft = targetXY[0] < midW;
var standX ;
if(isLeft){
standX = YUD.getX(YUD.getElementsByClassName('customGroup','div',get('mainContent'))[0]);
xy[0] = standX - targetXY[0];
}else{
standX = YUD.getX(get('mainContent')) + get('mainContent').offsetWidth;
xy[0] = standX - targetXY[0] - 30;
}

showAllCategory.init('moreProductTeamBtn','moreProductTeam',xy,zConfig);

}
}
);

</SCRIPT>



<DIV class=customGroup>
<H3><A href="#">www.corange.cn
</A></H3>
<UL>
<LI><A href="http://www.corange.cn/html/corange_2_1.html">Php</A> 
<LI><A href="http://www.corange.cn/html/corange_15_1.html">JS/Jquery/Ajax </A> 
<LI><A href="">1</A> 
<LI><A href="">2</A> 
<LI><A href="">3</A> 
<LI><A href="">4</A>
</LI>
</UL>
<DIV class=customGroupfooter><A class=more id=moreProductTeamBtn 
href="javascript:void(0)">See More</A> </DIV>
</DIV>

<DIV class=customGroupMore id=MinimoreProductTeam>
<DIV class=MiniMPTcontainer id=moreProductTeam><IFRAME 
class=MinimoreProductMaskIframe id=MinimoreProductMaskIframe 
style="HEIGHT: 200px" src="about:blank" frameBorder=0></IFRAME><SPAN 
class=MiniMPTclosebtn><A onclick=showAllCategory.hiddenContentForce() 
href="javascript:void(0);"><IMG height=17 
src="yiwu/close_more_product_team.gif" 
width=42 border=0></A></SPAN> 
<DIV class=MiniMPTitem id=MiniMPTitem><BR>
<UL>
<LI class=column><A 
href="">1</A> </LI>
<LI class=column><A 
href="">2</A> </LI>
<LI class=column><A 
href="">3</A> </LI>
<LI class=column><A 
href="">4</A> </LI>
<LI class=column><A 
href="">5</A> </LI>

</UL></DIV></DIV></DIV>
</DIV>
</BODY></HTML>
js,图片,css文件
http://www.corange.cn//uploadfiles/0606_55703.rar

http://www.corange.cn//uploadfiles/0606_38781.jpg



0
0
分享到:
评论

相关推荐

    从上直下的弹出菜单特效加半透明效果

    从上直下的弹出菜单特效加半透明效果,这是我的工作的内容,花了很多时间,所以和大家分享一下,其中有一个bug:在浏览器最大化的时候,当打开弹出框后,再变小窗口,知道高度比弹出框高度还要小的时候,会把系统...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑...

    JavaScript网页特效范例宝典源码

    实例048 半透明背景的下拉菜单 76 实例049 展开式导航条 80 实例050 用层制作下拉菜单1 81 实例051 用层制作下拉菜单2 84 1.10 侧导航条设计 86 实例052 自动隐藏式菜单 87 实例053 收缩式导航菜单 89 实例054 树状...

    C#程序开发范例宝典(第2版).part13

    实例029 半透明渐显窗体 29 实例030 窗口颜色的渐变 30 1.9 窗体动画 31 实例031 窗体中的滚动字幕 31 实例032 动画显示窗体 32 实例033 制作闪烁的窗体 33 实例034 实现任务栏通知窗口 34 实例035 动画形式...

    C#程序开发范例宝典(第2版).part02

    实例029 半透明渐显窗体 29 实例030 窗口颜色的渐变 30 1.9 窗体动画 31 实例031 窗体中的滚动字幕 31 实例032 动画显示窗体 32 实例033 制作闪烁的窗体 33 实例034 实现任务栏通知窗口 34 实例035 动画形式...

    C#程序开发范例宝典(第2版).part08

    实例029 半透明渐显窗体 29 实例030 窗口颜色的渐变 30 1.9 窗体动画 31 实例031 窗体中的滚动字幕 31 实例032 动画显示窗体 32 实例033 制作闪烁的窗体 33 实例034 实现任务栏通知窗口 34 实例035 动画形式...

    C#程序开发范例宝典(第2版).part12

    实例029 半透明渐显窗体 29 实例030 窗口颜色的渐变 30 1.9 窗体动画 31 实例031 窗体中的滚动字幕 31 实例032 动画显示窗体 32 实例033 制作闪烁的窗体 33 实例034 实现任务栏通知窗口 34 实例035 动画形式...

    JavaScript实用范例词典04-14

    6.14 半透明文字... 165 6.15 水波文字... 166 6.16 鼠标移上去后改变文字的颜色... 167 6.17 鼠标移上去后改变文字的样式... 168 6.18 让浏览者自己选择网页文字的 大小... 168 6.19 让浏览者自己选择网页...

Global site tag (gtag.js) - Google Analytics