为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 弹出层效果

弹出层效果

标签：
Html/CSS

         <!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 >
  <div class="LocaleManagementFlyoutStatic_msdn"  id="LocaleManagement"><a class="LocaleManagementFlyoutStaticLink_msdn" href="javascript:void(0)">United States - English&nbsp;</a><img class="LocaleManagementFlyoutPopArrow" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="[url]http://msdn2.microsoft.com/msdn/Controls/UserRecognitionFlyout/en-us/popdownarrow-msdn-left.gif[/url]" alt="Dropdown Arrow"  /><div id="LocaleManagement_Popup" class="LocaleManagementFlyoutPopup" >
      <table border="0" >
        <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" >
<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"  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" >
<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">
<!--把下面代码加到<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" >
      <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='';" />
  </div>
  <div id="topwrap">
   <div id="topcontainer" ></div>
  </div>
  <div id="bodycontainer">
    <div id="leftcontainer" ><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='';" />
    </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>

点击查看更多内容
发表于 2018.10.12 16:07， 共 1533 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

慕田峪是谁我也不认识

JS工程师
手记
篇
粉丝
40
获赞与收藏
95

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消