<html>
<head>
<title>MSND 滑出菜单</title>
<meta name="Generator" content="EditPlus">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.LocaleManagementFlyoutPopup {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
border:1px solid #666666;
padding: 3px 3px 3px 3px;
text-align: left;
background-color: #FFFFFF;
z-index: 10;
opacity: .95;
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2,OffY=2,Color='silver',Positive='true') alpha(opacity=95);
}
.LocaleManagementFlyoutPopup A, .LocaleManagementFlyoutPopup A:visited {
font-size: 10px;
color: #000000;
cursor: hand;
border: 1px solid #FFFFFF;
padding: 1px 3px 1px 3px;
height: 15px;
text-align: left;
text-decoration: none;
white-space: nowrap;
display: block;
}
.LocaleManagementFlyoutPopup A:hover {
background-color: #f0f7fd;
color: #000000;
cursor: hand;
border: 1px solid #addbef;
padding: 1px 3px 1px 3px;
height: 15px;
text-decoration: none;
white-space: nowrap;
display: block;
}
.LocaleManagementFlyoutPopupHr {
height: 1px;
background: #d0e0f0;
margin: 0px 11px 21px 11px;
}
.LocaleManagementFlyoutPopArrow {
margin: 4px 0px 0px 0px;
}
.LocaleManagementFlyoutStatic_msdn {
border: 1px solid #ffffff;
}
.LocaleManagementFlyoutStaticHover_msdn {
border: 1px solid #addbef;
}
.TFlyPopupAnimate {
position: absolute;
display: block;
border: 1px solid gray;
overflow: hidden;
visibility: hidden;
margin: 0;
padding: 0;
z-index: 1;
}
</style>
<script>
/*
name 对象的 id 值
offsetLeft 定位:左 - 偏移量
offsetTop 定位:顶部 - 偏移量
alignment 对齐方式{-1: left; 0: center; 1: right}
anyIter 显示方式(<=0: 普通样式; >0: 缩放样式)
anyTime 动画时间间隔
staticHover 鼠标覆盖时的样式
popupHover 显示内容鼠标覆盖时的样式
popupLatency 显示内容延时
hideLatency 隐藏内容延时
onInit 初始化
onPopup 显示内容时行为
onHide 隐藏内容时行为
*/
function TFly_Init(name, offsetLeft, offsetTop, alignment, anyIter, anyTime, staticHover, popupHover, popupLatency, hideLatency, onInit, onPopup, onHide) {
var TFly = document.getElementById(name);
TFly.DT = document.getElementById(name + "_Popup"); // 显示内容对象
TFly.F = document.getElementById(name + "_Anim"); // 动画效果对象
TFly.oX = offsetLeft;
TFly.oY = offsetTop;
TFly.alignment = alignment;
TFly.AnyIter = anyIter;
TFly.AnyTime = anyTime;
TFly.popupLatency = popupLatency;
TFly.hideLatency = hideLatency;
TFly.onPopup = onPopup;
TFly.onHide = onHide;
TFly. = function() {
if (staticHover != '') { // 替换样式,并储存原来的样式
TFly.className_ = TFly.className;
TFly.className = staticHover;
}
TFly_Popup(TFly, true);
}
TFly. = function() {
if (staticHover != '') { // 恢复原来的样式
TFly.className = TFly.className_;
}
TFly_Popup(TFly, false);
}
if (document.all) {
TFly.onactivate = TFly.onmouseover;
TFly.ondeactivate = TFly.onmouseout;
} else {
TFly.onfocus = TFly.onmouseover;
TFly.onblur = TFly.onmouseout;
}
TFly.DT. = function() {
if (popupHover != '') {
TFly.DT.className_ = TFly.DT.className;
TFly.DT.className = popupHover;
}
TFly_Popup(TFly, true);
}
TFly.DT. = function() {
if (popupHover != '') {
TFly.DT.className = TFly.DT.className_;
}
TFly_Popup(TFly, false);
}
TFly_CallClientFunction(onInit, TFly);
}
// 调用初始化程序
function TFly_CallClientFunction(name, TFly) {
if (name != null && name != "")
eval(name + "(TFly);");
}
// 定位
function TFly_SetPosition(TFly, obj) {
obj.style.top = TFly.oY + TFly.offsetHeight + "px";
obj.style.left = TFly.oX + (TFly.offsetWidth - obj.offsetWidth ) * (1 + TFly.alignment) / 2 + "px";
}
function TFly_Popup(TFly, value) {
if (TFly.timer != null) window.clearTimeout(TFly.timer); // 清除超时
if (value) { // 判断状态
if (TFly.status == "on") return;
// 如果 popup 已经显示,则显示延时为 0
// 例如从一个菜单移动到另外一个菜单
var timeout = (TFly.status == "active") ? 0 : TFly.popupLatency;
if (TFly.AnyIter > 0 && TFly.AnyTime > 0)
TFly.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, true, TFly.F.curIter);}, timeout);
else
TFly.timer = window.setTimeout(function() {TFly_SetVisibility(TFly, true);}, timeout);
} else {
if (TFly.status == "off") return;
var timeout = (TFly.status == "active") ? 0 : TFly.hideLatency;
if (TFly.AnyIter > 0 && TFly.AnyTime > 0)
TFly.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, false, TFly.F.curIter);}, timeout);
else
TFly.timer = window.setTimeout(function() {TFly_SetVisibility(TFly, false);}, timeout);
}
}
// 设置弹出内容的可见性
function TFly_SetVisibility(TFly, value) {
if (value == true) {
TFly_SetPosition(TFly, TFly.DT);
TFly.DT.style.visibility = "visible";
TFly.style.zIndex = "999";
} else {
TFly.DT.style.visibility = "hidden";
TFly.style.zIndex = "0";
TFly.DT.style.left = "-10000px";
}
}
function TFly_AnimateStart (TFly, inout, curIter) {
if (TFly.F.timer != null) window.clearTimeout(TFly.F.timer);
if (curIter == null) curIter=0;
if (TFly.status != "active") {
TFly.status = "active";
TFly.F.style.visibility = "visible";
TFly.DT.style.visibility = "hidden";
}
if (curIter < 0 || curIter > TFly.AnyIter) {
TFly.F.curIter = (curIter < 1) ? 0 : TFly.AnyIter;
TFly.status = (TFly.F.curIter == TFly.AnyIter) ? "on": "off";
TFly.F.style.visibility = "hidden";
TFly_SetPosition(TFly, TFly.DT);
TFly.style.zIndex = (TFly.F.curIter == TFly.AnyIter) ? "999" : "0";
if (TFly.F.curIter == TFly.AnyIter) {
TFly.status = "on";
TFly_SetVisibility(TFly, true);
TFly_CallClientFunction(TFly.onPopup, TFly);
} else {
TFly.status = "off";
TFly_SetVisibility(TFly, false);
TFly_CallClientFunction(TFly.onHide, TFly);
}
} else {
var per = curIter * (95 / TFly.AnyIter) + 5;
TFly.F.style.visibility = "hidden";
TFly.F.style.width = TFly.DT.offsetWidth / 100 * per + "px";
TFly.F.style.height = TFly.DT.offsetHeight / 100 * per + "px";
TFly_SetPosition(TFly, TFly.F);
TFly.F.style.visibility = "visible";
var timeout = (per == 100 ) ? 0 : TFly.AnyTime - (TFly.AnyTime / (TFly.AnyIter) * (curIter));
curIter += (inout) ? 1 : -1;
TFly.F.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, inout, curIter)}, timeout);
TFly.F.curIter = curIter;
}
}
</script>
</head>
<body>
<div style="display:inline;vertical-align:middle">
<div class="LocaleManagementFlyoutStatic_msdn" style="position:relative;" id="LocaleManagement"><a class="LocaleManagementFlyoutStaticLink_msdn" href="javascript:void(0)">United States - English </a><img class="LocaleManagementFlyoutPopArrow" src="[url]http://msdn2.microsoft.com/msdn/Controls/UserRecognitionFlyout/en-us/popdownarrow-msdn-left.gif[/url]" alt="Dropdown Arrow" style="height:4px;width:7px;border-width:0px;" /><div id="LocaleManagement_Popup" class="LocaleManagementFlyoutPopup" style="position: absolute;visibility:hidden;left:-65534px;">
<table border="0" style="width:175px;">
<tr>
<td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl05','')">Australia (English)</a></td>
</tr><tr>
<td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl06','')">Brasil (Portugués)</a></td>
</tr><tr>
<td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl07','')">Canada (English)</a></td>
</tr><tr>
<td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl08','')">Canada (Fran?ais)</a></td>
</tr><tr>
<td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl09','')">中国 (简体中文)</a></td>
</tr><tr>
<td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl10','')">Deutschland (Deutsch)</a></td>
</tr><tr>
<td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl11','')">France (Fran?ais)</a></td>
</tr><tr>
<td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl12','')">India (English)</a></td>
</tr><tr>
<td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl13','')">Россия (Pусский)</a></td>
</tr><tr>
<td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl14','')">United Kingdom (English)</a></td>
</tr><tr>
<td><a href="javascript:__doPostBack('ctl00$BannerControl1$LocaleManagement$ctl00$ctl15','')">United States (English)</a></td>
</tr><tr>
<td class="LocaleManagementFlyoutPopupHr"></td>
</tr><tr>
<td><a href="/en-us/preferences/lang/">More...</a></td>
</tr>
</table></div>
<div id="LocaleManagement_Anim" class="TFlyPopupAnimate"></div>
</div>
</div>
<script>
TFly_Init('LocaleManagement', 0, 0, -1, 2, 60, 'LocaleManagementFlyoutStaticHover_msdn', '', 100, 400, '', '', '');
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[url]http://www.w3.org/TR/html4/loose.dtd[/url]">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; left:10px; top:10px; width:650px; height:26px; z-index:1; visibility: visible;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#990000">
<td height="32" bgcolor="#FFCC00" onMouseOver="MM_showHideLayers('Layer2','','show')"><a href="#">这里的有问题</a></td>
<td>fdsafdsafds</td>
<td>fdsafdsafdsa</td>
<td>fdsafdsafdsafdsafdsafds</td>
</tr>
</table>
</div>
<div id="Layer2" style="position:absolute; left:12px; top:42px; width:134px; height:28px; z-index:2; visibility: hidden;" onMouseOut="MM_showHideLayers('Layer2','','hide')" onMouseOver="MM_showHideLayers('Layer2','','show')">
<!--
在Layer2图层再加上代码(即上一行):
onMouseOver="MM_showHideLayers('Layer2','','show')"
-->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999">
<tr>
<td height="22"><a href="#">dsadsad</a><br>
<br>
<a href="#">sadsada</a> </tr>
</table>
</div>
<div id="Layer3" style="position:absolute; left:266px; top:42px; width:137px; height:71px; z-index:3; visibility: visible;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="22" bgcolor="#009966">dsadsa</td>
</tr>
<tr>
<td height="30" bgcolor="#009966">dsadsada</td>
</tr>
</table>
</div>
</body>
</html>
<head>
<title>中国站长天空-网页特效-窗口特效-很酷的点击弹出层效果</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
<!--
body {
background-color: #EEEEEE;
margin: 0px;
text-align: center;
}
#wrap {
width: 736px;
background-color: #FFFFFF;
overflow: hidden;
margin: 12px;
padding: 12px;
}
#topcontainer {
height: 80px;
width: 732px;
background-color: #99FF66;
border: 1px solid #79F200;
}
#bodycontainer {
height: 400px;
width: 100%;
margin-top: 12px;
}
#bottomcontainer {
height: 60px;
width: 100%;
margin-top: 12px;
}
#topwrap {
width: 100%;
}
#leftcontainer {
background-color: #99FF66;
height: 400px;
width: 120px;
float: left;
border: 1px solid #79F200;
}
input {
background-color: #99FF66;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #79F200;
border-right-color: #79F200;
border-bottom-color: #79F200;
border-left-color: #79F200;
line-height: 28px;
background-position: center;
height: 30px;
}
-->
</style>
<script language="javascript">
<!--
function senfe(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName("tr");
for(var i=0;i<t.length;i++){
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
t[i].onclick=function(){
if(this.x!="1"){
this.x="1";//本来打算直接用背景色判断,FF获取到的背景是RGB值,不好判断
this.style.backgroundColor=d;
}else{
this.x="0";
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
t[i].onmouseover=function(){
if(this.x!="1")this.style.backgroundColor=c;
}
t[i].onmouseout=function(){
if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
}
-->
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="wrap">
<div align="left" style="margin-bottom:3px">
<input type="button" id="showtop" onclick="topslider.show();this.style.display='none';document.getElementById('hidetop').style.display='';" value="展开顶部"/>
<input type="button" id="hidetop" value="关闭顶部" onclick="topslider.hide();this.style.display='none';document.getElementById('showtop').style.display='';" style="display:none"/>
</div>
<div id="topwrap">
<div id="topcontainer" style="display:none"></div>
</div>
<div id="bodycontainer">
<div id="leftcontainer" style="display:none"><br />
<br />
<br />
</div>
<div align="left">
<input type="button" id="showleft" value="展开左侧" onclick="leftslider.show();this.style.display='none';document.getElementById('hideleft').style.display='';"/>
<input type="button" id="hideleft" value="关闭左侧" onclick="leftslider.hide();this.style.display='none';document.getElementById('showleft').style.display='';" style="display:none"/>
</div>
</div>
<div id="bottomcontainer"></div>
</div>
<script language="JavaScript" type="text/javascript">
slider.names = new Array();
function slider()
{
this.id = slider.names.length;
slider.names[this.id] = this;
this.target = document.getElementById(arguments[0]); //第一个参数:被操作div的id
this.direction = arguments[1];//第二个参数:div弹出的方向
this.height = arguments[2];//第三个参数:div的高度
this.width = arguments[3];//第四个参数:div的宽度
this.step = arguments[4];//第五个参数:希望动作分解为几步完成
this.timer = 10 * arguments[5];//第六个参数:每个动作的间隔时间,10ms为一个单位
this.startopa = arguments[6];//第七个参数:div开始的透明度
this.sparent = this.target.parentNode;//获取操作div的父容器
this.intervalid = null;//循环定时的id
this.i = 0;//循环的计数器
this.status = 0;//slider层的状态:0-可以展开;1-不可以展开
this.target.style.display = "none";//先将div隐去
return this;
}
slider.prototype.initialize = function()
{
this.sparent.style.overflow = "hidden";//设置父容器overflow
this.target.style.width = Number(this.width) + 'px';//设置目标div的宽度
this.target.style.height = Number(this.height) + 'px';//设置目标div的高度
this.target.style.position = "";//设置目标div的定位方式
this.target.style.display = "";//设置目标div的显示方式
this.target.style.filter = 'Alpha(opacity=' + Number(this.startopa) + ')';//设置目标div的透明度为初始透明度
this.target.style.overflow = "hidden";//设置overflow
switch(this.direction)//根据弹出方向设定div的margin
{
case 1://left to right
this.target.style.marginLeft = "-" + this.width + "px";
break;
case 2://top to bottom
this.target.style.marginTop = "-" + this.height + "px";
break;
case 3://right to left
this.target.style.marginRight = "-" + this.width + "px";
break;
}
}
slider.prototype.show = function()
{
if (this.status==0)//检查状态是否已经展开
{
this.initialize();//操作div及其父容器的初始化
this.intervalid = window.setInterval("slider.names["+this.id+"].cycle()",this.timer);//设置动作循环
}
}
slider.prototype.hide = function()
{
if (this.status==1)//检查状态是否已经展开
{
this.intervalid = window.setInterval("slider.names["+this.id+"].decycle()",this.timer);//设置动作循环
}
}
slider.prototype.cycle = function() //单步循环动作
{
var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值
var opastep = Math.round(((100 - Number(opa)) / this.step)+2.5);//计算每步增加的透明度
var nopa = Number(opa) + Number(opastep);//当前透明度
if (nopa>100){this.target.style.filter = 'Alpha(opacity=100)';}else{this.target.style.filter = 'Alpha(opacity=' + String(nopa) + ')';}//给div透明度赋值
switch(this.direction)//根据弹出方向计算和设定div的动作
{
case 1: //left to right
var opx = this.target.style.marginLeft.split("px")[0];
var pxstep = Math.round((this.width / this.step)+0.5);
var npx = Number(opx) + Number(pxstep);
if (npx>0){this.target.style.marginLeft = '0px';}else{this.target.style.marginLeft = String(npx) + 'px';}
break;
case 2: //top to bottom
var opx = this.target.style.marginTop.split("px")[0];
var pxstep = Math.round((this.height / this.step)+0.5);
var npx = Number(opx) + Number(pxstep);
if (npx>0){this.target.style.marginTop = '0px';}else{this.target.style.marginTop = String(npx) + 'px';}
break;
case 3: //right to left
var opx = this.target.style.marginRight.split("px")[0];
var pxstep = Math.round((this.width / this.step)+0.5);
var npx = Number(opx) + Number(pxstep);
if (npx>0){this.target.style.marginRight = '0px';}else{this.target.style.marginRight = String(npx) + 'px';}
break;
}
this.i++ //计数器+1
if (this.i>(this.step-1)){window.clearInterval(this.intervalid);this.i=0;this.status=1;} //循环完毕,清除循环定时
}
slider.prototype.decycle = function() //单步循环动作
{
var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值
var opastep = Math.round(((100 - Number(opa)) / this.step)+2.5)*2;//计算每步增加的透明度
var nopa = Number(opa) - Number(opastep);//当前透明度
if (nopa<this.startopa){this.target.style.filter = 'Alpha(opacity=' + this.startopa + ')';}else{this.target.style.filter = 'Alpha(opacity=' + String(nopa) + ')';}//给div透明度赋值
switch(this.direction)//根据弹出方向计算和设定div的动作
{
case 1: //left to right
var opx = this.target.style.marginLeft.split("px")[0];
var pxstep = Math.round((this.width / Math.round(this.step*0.5))+0.5);
var npx = Number(opx) - Number(pxstep);
if (Math.abs(npx)>this.width+2){this.target.style.marginLeft = '-' + this.width + 'px';}else{this.target.style.marginLeft = String(npx) + 'px';}
break;
case 2: //top to bottom
var opx = this.target.style.marginTop.split("px")[0];
var pxstep = Math.round((this.height / Math.round(this.step*0.5))+0.5);
var npx = Number(opx) - Number(pxstep);
if (Math.abs(npx)>this.height+2){this.target.style.marginTop = '-' + this.height + 'px';}else{this.target.style.marginTop = String(npx) + 'px';}
break;
case 3: //right to left
var opx = this.target.style.marginRight.split("px")[0];
var pxstep = Math.round((this.width / Math.round(this.step*0.5))+0.5);
var npx = Number(opx) - Number(pxstep);
if (Math.abs(npx)>this.width+2){this.target.style.marginRight = '-' + this.width + 'px';}else{this.target.style.marginRight = String(npx) + 'px';}
break;
}
this.i++ //计数器+1
if (this.i>(Math.round(this.step*0.5)-1)){window.clearInterval(this.intervalid);this.i=0;this.status=0;this.target.style.display = "none";} //循环完毕,清除循环定时
}
//关于如何使用这个代码的说明:
//上面的代码可以封装成为一个单独的js文件,然后包含在页面当中
//然后使用下面的代码进行slider初始化,一个页面可以使用多个slider,下面的代码必须在页面底部</body>之前,否则可能会报错
var topslider = new slider('topcontainer',2,80,734,20,2,20);
var leftslider = new slider('leftcontainer',1,398,120,20,1,20);
//参数分别代表的意义可以在代码顶端看到
//控制slider动作可以使用两种方式
//一种是使用下面声明的名字调用,比如topslider.show(),topslider.hide()
//另一种可以使用slider.names[0].show(),slider.names[0].hide(),下标取决于slider初始化的顺序
</script>
</body>
</html>