弹出层效果

最新推荐文章于 2024-07-20 10:36:53 发布

weixin_33957648

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量103

点赞数

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/fluagen/97257

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<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">

</style>
<script language="JavaScript" type="text/JavaScript">

</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')">

<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>

=====================================================

<html>
<head>
<title>中国站长天空-网页特效-窗口特效-很酷的点击弹出层效果</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">

<style type="text/css">

</style>
<script language="javascript">

</script>
</head>
<body>

<div id="wrap">
<div align="left" style="margin-bottom:3px">
      <input type="button" id="showtop" οnclick="topslider.show();this.style.display='none';document.getElementById('hidetop').style.display='';" value="展开顶部"/>
   <input type="button" id="hidetop" value="关闭顶部" οnclick="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="展开左侧" οnclick="leftslider.show();this.style.display='none';document.getElementById('hideleft').style.display='';"/>
      <input type="button" id="hideleft" value="关闭左侧" οnclick="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>

转载于:https://blog.51cto.com/fluagen/97257

weixin_33957648

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹出层效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>MSND 滑出菜单</title><meta name="Generator" content="EditPlus"><meta http...
复制链接

扫一扫