动态删减选项卡的效果示例

haige18

浏览: 192811 次
性别:
来自: 北京

最近访客更多访客>>

xchao

k0521klb

liuzhize520

cjh19850924

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

prototype Google BBS CSS Ajax

<html>
<head>
 <title>163邮箱选项卡效果</title>
 <script>
 </script>
 <style>
  ul,li
  {
   margin:0;
   padding:0;
   list-style:none;
   /*for close location*/
   position:relative; 
  }
  li
  {
   display:block;
   width:130px;
   height:25px;
   float:left;
   cursor:pointer;
   overflow:hidden;
  }
  span
  {
   font-size:10pt;
   color:#22b5d9;
   font-weight:bold;
   display:block;
  }
  #asgardCard li
  {
   font-size:10pt;
   font-weight:bold;
   color:#22b5d9;
   border:1px solid #22b5d9;
   margin:10px;
   text-align:center;
   line-height:1.5;
  }
 </style>
 
 <style>
  /*Asgard CardProgram Css Start*/
  #itemsPanel,#itemsPanel li
  {
   margin:0;
   padding:0;
   list-style:none;
   /*for close location*/
   position:relative; 
  }
  /*Clear Float：Referrence-->http://www.blueidea.com/tech/web/2005/3065.asp*/
  /*There is defect:the attribute-content hold one line place.*/
  ul:after
  {
      content: "."; 
      display: block;
      height: 0; 
      clear: both; 
      visibility: hidden;
  }
  #cardContent
  {
   height:auto;
   min-height:300px;
   border:2px solid #cccccc;
   clear:both;
  }
  #itemsPanel li
  {
   display:block;
   width:130px;
   height:25px;
   float:left;
   cursor:pointer;
   overflow:hidden;
  }
  #cardFrame
  {
   width:100%;height:100%;border:1px solid #ffffff;margin:0;
  }
  .active
  {   
   background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') 0 0 no-repeat;
  }  
  .default
  {
   background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') 0 -25px no-repeat;
  }
  .title
  {
   font-size:10pt;
   font-weight:bold;
   line-height:2;
   padding-left:10px;
   display:block;
   width:105px;
   height:25px;
  }
  li .close
  {   
   position:absolute;
   top:9px;
   left:115px;
   display:block;
   width:10px;
   height:10px;
   overflow:hidden;
  }
  .active .close
  {
   background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') 0 -50px no-repeat;
  }
  .default .title
  {
   color:#999999;
  }
  .active .title
  {
   color:#000000;
  }
  .active .close:hover
  {
   background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -10px -50px no-repeat;
  }
  .default .close
  {
   background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -20px -50px no-repeat;
  }
  .default .close:hover
  {
   background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -30px -50px no-repeat;
  }
  /*Asgard CardProgram Css End*/
 </style>
</head>
<body>
<span>1.代码效果示例：</span>
<ul> 
 <li class="active">
  <nobr class="title">Kiss</nobr>
  <a href="#nogo" class="close" title="关闭"></a>
 </li>
 <li class="default">
  <nobr class="title">Andy</nobr>
  <a href="#nogo" class="close" title="关闭"></a>
 </li> 
</ul>
<p />
<span>注：以上代码为DOM动态组织的代码参考<span>
<p style="clear:both;"/>
<p />
<span>2.点击下表，更换内容</span>
<ul id="asgardCard">
<li title="blueidea">蓝色理想</li>
<li title="google">Google中国</li>
<li title="email126">Email-126</li>
<li title="ngacn">艾泽拉斯</li>
</ul>
<p style="clear:both;"/>
<span>3.以下为动态创建：</span>
<div>
 <ul id="itemsPanel">
 </ul>
 <div id="cardContent">
 <iframe id="cardFrame">
 </iframe>
 </div>
</div>
</body>
<script>
/*
* Field Declare ^-^ 
*/
var Asgard;
if(!Asgard)
 Asgard={};
if(!Asgard.CardProgram)
 Asgard.CardProgram={};
/*
*function:define Object ItemsPanel
*/
Asgard.CardProgram.ItemsPanel=function(id,frameId)
{
 this.element=$(id);
 this.register=new Array();
 this.currentItem=null;
 this.cardFrame=$(frameId);
 this.element.className='itemsPanel';
}
/*
*function:add item from panel
*/
Asgard.CardProgram.ItemsPanel.prototype.addItem=function(item)
{
 if(this.validateExist(item.element.getAttribute('id')))
   return;
 item.panel=this;
 this.visitedRegister(item,"add");
 this.element.appendChild(item.element);
}
/*
*function:delete item from panel
*/
Asgard.CardProgram.ItemsPanel.prototype.deleteItem=function(item)
{   
 this.visitedRegister(item,"delete");
 this.element.removeChild(item.element);
}
/*
*Ajax or other 
*/
Asgard.CardProgram.ItemsPanel.prototype.changeSubPage=function()
{
 if(this.register.length==0)
 {
  this.cardFrame.src="";
  return;
 }
 
 this.cardFrame.src=this.currentItem.url;
 /*
 *这里用户可以自己定义想要的页面，如果你想内嵌IFrame。
 */
}
Asgard.CardProgram.ItemsPanel.prototype.validateExist=function(id)
{
 for(var i=0;i<this.register.length;i++)
 {
  if(this.register[i].element.id==id)
  {
   return true;
  }
 } 
 return false;
}
/*
*function:register visited sequence
*      type--add | delete | active
*/
Asgard.CardProgram.ItemsPanel.prototype.visitedRegister=function(item,type)
{
 var i=this.register.length;
 if(type=="add")
 {  
  for(var k=0;k<i;k++)
  {
   this.register[k].resetItem();
  }
  this.currentItem=item;
  this.register[i]=item;
  this.currentItem.element.className="active";
  
  this.changeSubPage();
 }
 else if(type=="delete")
 {     
  for(k=0;k<i;k++)
  {
   if(this.register[k]==item)
   {
    this.register.splice(k,1);
    break;
   }
  }
  if(item==this.currentItem)
  {
   i=this.register.length;
   if(i>0)
   {
    this.currentItem=this.register[i-1];
    this.currentItem.element.className="active";
   }
   else
    this.currentItem=null;
  }
  
  this.changeSubPage();
 }
 else if(type=="active")
 {
  if(this.currentItem==item)
   return;
  else
  {     
   for(k=0;k<i;k++)
   {
    if(this.register[k]==item)
    {
     this.register.splice(k,1);
     break;
    }
   }
   
   i=this.register.length;
   for(k=0;k<i;k++)
   {
    this.register[k].resetItem();
   }
   this.currentItem=item;
   this.register.push(item);
  }
  
  this.changeSubPage();
 }
}
/*
*function:define Object Item
*/
Asgard.CardProgram.Item=function(id,title,url,flag)
{ 
 this.element=this.$C();
 this.panel={};
 this.id=id;
 this.title=title;
 this.url=url;
 this.flag=flag;
 this.init();
};
/*
*function:init item
*/
Asgard.CardProgram.Item.prototype.init=function()
{
 this.element.setAttribute('id',this.id);
 this.element.className="default";  
 
 var mirror=this;
 if(!this.flag)
 {  
  this.element.innerHTML="<nobr class='title' title='"+this.title+"'>"+this.title+"</nobr>"+"<a href='#nogo' class='close' title='关闭'></a>";  
  this.addEventListener(this.$ES(this.element,'nobr')[0],'click',function(){mirror.activeItem();});
  this.addEventListener(this.$ES(this.element,'a')[0],'click',function(){mirror.destroyItem();});
 }
 else
 {
  this.element.innerHTML="<nobr class='title' title='"+this.title+"'>"+this.title+"</nobr>"; 
  this.addEventListener(this.$ES(this.element,'nobr')[0],'click',function(){mirror.activeItem();});
 }
 
}
/*
*active item
*/
Asgard.CardProgram.Item.prototype.activeItem=function()
{
 this.panel.visitedRegister(this,"active");
 this.element.className="active"; 
}
/*
*function:reset item
*/
Asgard.CardProgram.Item.prototype.resetItem=function()
{
 this.element.className="default"; 
}
/*
*function:destroy item
*/
Asgard.CardProgram.Item.prototype.destroyItem=function()
{
 this.panel.deleteItem(this);
}
/*
*function:addListener to item
*/
Asgard.CardProgram.Item.prototype.addEventListener=function(element,type,handler)
{
 if(element.addEventListener)
  element.addEventListener(type,handler,true);
 else
  element.attachEvent("on"+type,handler,true);
}
/*
*function:usefull functions
*/
Asgard.CardProgram.Item.prototype.$C=function(tag)
{
 if(tag  &&  typeof tag =="string")
   return document.createElement(tag);
 else
  return document.createElement('li');
}
Asgard.CardProgram.Item.prototype.$ES=function(element,tag)
{
 return element.getElementsByTagName(tag);
}
function $(id)
{
 return document.getElementById(id);
}
</script>
<script>
function attachExampleEvent()
{
 var lists=$('asgardCard').getElementsByTagName('li');
 for(var i=0;i<lists.length;i++)
 {
  lists[i].onclick=exampleClickListener;
 }
}
function exampleClickListener(e)
{
 e=e || window.event;
 var source=e.target || e.srcElement;
 if(source.getAttribute('title')=='blueidea')
 {
   itemsPanel.addItem(new Asgard.CardProgram.Item("blueidea","蓝色理想","http://www.blueidea.com",false));
 }
 else if(source.getAttribute('title')=='google')
 {
   itemsPanel.addItem(new Asgard.CardProgram.Item("google","Google中国","http://www.google.cn",false));
 }
 else if(source.getAttribute('title')=='email126')
 {
   itemsPanel.addItem(new Asgard.CardProgram.Item("email126","Email-126","http://mail.126.com",false));
 }
 else if(source.getAttribute('title')=='ngacn')
 {
   itemsPanel.addItem(new Asgard.CardProgram.Item("ngacn","艾泽拉斯","http://www.ngacn.com",false));
 } 
}
var itemsPanel=null;
function exampleStartMethod()
{
 attachExampleEvent();
 if(itemsPanel==null)
  itemsPanel=new Asgard.CardProgram.ItemsPanel("itemsPanel","cardFrame");
 itemsPanel.addItem(new Asgard.CardProgram.Item("index","时空创意","http://www.skst.com.cn",true)); 
}
window.onload=exampleStartMethod;
</script>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

效果：

来自：http://www.alixixi.com/Dev/HTML/jsrun/color/2008/2008051280191.html

查看图片附件

分享到：

动态打开层及关闭层超酷特效 | 仿GOOGLE个性首页可移动图层效果

2010-10-30 11:53
浏览 865
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

选项卡自动生成代码(html,js): 选项卡自动生成代码,动态删减选项卡的效果示例

高考全国卷Ⅱ英语试题解析精编版精选.doc: - 对于写作部分，文档可能包含改进建议，如删减不必要的词句、增加观点、修正语法错误，这些都是提高文章质量的关键。 6. **备考策略**： - 考生应定期进行模拟考试，熟悉考试流程和时间管理。 - 加强听力训练，...

电力系统中基于MATLAB的价格型需求响应与电价弹性矩阵优化: 内容概要：本文详细介绍了如何利用MATLAB进行价格型需求响应的研究，特别是电价弹性矩阵的构建与优化。文章首先解释了电价弹性矩阵的概念及其重要性，接着展示了如何通过MATLAB代码实现弹性矩阵的初始化、负荷变化量的计算以及优化方法。文中还讨论了如何通过非线性约束和目标函数最小化峰谷差，确保用户用电舒适度的同时实现负荷的有效调节。此外，文章提供了具体的代码实例，包括原始负荷曲线与优化后负荷曲线的对比图，以及基于历史数据的参数优化方法。适合人群：从事电力系统优化、能源管理及相关领域的研究人员和技术人员。使用场景及目标：适用于希望深入了解并掌握价格型需求响应机制的专业人士，旨在帮助他们更好地理解和应用电价弹性矩阵，优化电力系统的负荷分布，提高能源利用效率。其他说明：文章强调了实际应用中的注意事项，如弹性矩阵的动态校准和用户价格敏感度的滞后效应，提供了实用的技术细节和实践经验。

一级医院医疗信息管理系统安装调试技术服务合同20240801.pdf: 一级医院医疗信息管理系统安装调试技术服务合同20240801.pdf

表5 文献综述.doc: 表5 文献综述.doc

36W低压输入正激电源，正激变压器设计方法步骤及谐振电感的设计方法，主要讲诉了正激电源变压器测的输入输出参数，按输入的条件设计相关的变压器的参数，同时将输出电感的设计方法一并例出，详细的设计步骤: 36W低压输入正激电源变压器电感设计

基于YOLOv8的深度学习课堂行为检测系统源码(含检测图片和视频): 基于YOLOv8的深度学习课堂行为检测系统源码，软件开发环境python3.9，系统界面开发pyqt5。在使用前安装python3.9，并安装软件所需的依赖库，直接运行MainProgram.py文件即可打开程序。模型训练时，将train,val数据集的绝对路径改为自己项目数据集的绝对路径，运行train.py文件即可开始进行模型训练，内含项目文件说明，以及检测图片和视频。

odbc-oracle zabbix模版原版: odbc_oracle zabbix模版原版

基于纳什谈判理论的风光氢多主体能源系统合作运行方法——综合能源交易与优化模型: 内容概要：本文探讨了利用纳什谈判理论来优化风光氢多主体能源系统的合作运行方法。通过MATLAB代码实现了一个复杂的优化模型，解决了风电、光伏和氢能之间的合作问题。文中详细介绍了ADMM（交替方向乘子法）框架的应用，包括联盟效益最大化和收益分配谈判两个子任务。此外，还涉及了加权残差计算、目标函数构造、可视化工具以及多种博弈模式的对比等功能模块。实验结果显示，合作模式下系统总成本显著降低，氢能利用率大幅提升。适合人群：从事能源系统研究的专业人士、对博弈论及其应用感兴趣的学者和技术人员。使用场景及目标：适用于需要优化多主体能源系统合作运行的场合，如工业园区、电网公司等。主要目标是提高能源利用效率，降低成本，增强系统的灵活性和稳定性。其他说明：代码中包含了丰富的可视化工具，能够帮助研究人员更好地理解和展示谈判过程及结果。同时，提供了多种博弈模式的对比功能，便于进行性能评估和方案选择。

C#与Halcon联合编程实现高效视觉几何定位与测量框架: 内容概要：本文详细介绍了如何利用C#与Halcon联合编程构建高效的视觉几何定位与测量框架。主要内容涵盖模板创建与匹配、圆测量、数据持久化以及图像采集等方面的技术细节。首先，通过创建形状模板并进行匹配，实现了工件的精确定位。接着，针对圆形物体的测量，提出了动态ROI绘制、亚像素边缘提取和稳健圆拟合的方法。此外，还讨论了模板管理和图像采集的最佳实践，确保系统的稳定性和高效性。最后，强调了Halcon对象的内存管理和错误处理机制，提供了实用的优化建议。适合人群：具备一定编程基础，尤其是对C#和Halcon有一定了解的研发人员和技术爱好者。使用场景及目标：适用于工业生产线上的自动化检测设备开发，旨在提高工件定位和尺寸测量的精度与效率。主要目标是帮助开发者掌握C#与Halcon联合编程的具体实现方法，从而构建稳定可靠的视觉检测系统。其他说明：文中提供了大量实战代码片段和调试技巧，有助于读者快速理解和应用相关技术。同时，作者分享了许多实际项目中的经验和教训，使读者能够避开常见陷阱，提升开发效率。

QT6 C++视频播放器实现（基于QGraphicsVideo）: QT视频播放器实现（基于QGraphicsView）

评估管线钢环焊缝质量及其对氢脆的敏感性.pptx: 评估管线钢环焊缝质量及其对氢脆的敏感性.pptx

机器学习（预测模型）：专注于 2024 年出现的漏洞（CVE）信息数据集: 该是一个在 Kaggle 上发布的数据集，专注于 2024 年出现的漏洞（CVE）信息。以下是关于该数据集的详细介绍：该数据集收集了 2024 年记录在案的各类漏洞信息，涵盖了漏洞的利用方式（Exploits）、通用漏洞评分系统（CVSS）评分以及受影响的操作系统（OS）。通过整合这些信息，研究人员和安全专家可以全面了解每个漏洞的潜在威胁、影响范围以及可能的攻击途径。数据主要来源于权威的漏洞信息平台，如美国国家漏洞数据库（NVD）等。这些数据经过整理和筛选后被纳入数据集，确保了信息的准确性和可靠性。数据集特点：全面性：涵盖了多种操作系统（如 Windows、Linux、Android 等）的漏洞信息，反映了不同平台的安全状况。实用性：CVSS 评分提供了漏洞严重程度的量化指标，帮助用户快速评估漏洞的优先级。同时，漏洞利用信息（Exploits）为安全研究人员提供了攻击者可能的攻击手段，有助于提前制定防御策略。时效性：专注于 2024 年的漏洞数据，反映了当前网络安全领域面临的新挑战和新趋势。该数据集可用于多种研究和实践场景：安全研究：研究人员可以利用该数据集分析漏洞的分布规律、攻击趋势以及不同操作系统之间的安全差异，为网络安全防护提供理论支持。机器学习与数据分析：数据集中的结构化信息适合用于机器学习模型的训练，例如预测漏洞的 CVSS 评分、识别潜在的高危漏洞等。企业安全评估：企业安全团队可以参考该数据集中的漏洞信息，结合自身系统的实际情况，进行安全评估和漏洞修复计划的制定。

QML Combobox 自动过滤，输入字符串后自动匹配: 博客主页：https://blog.csdn.net/luoyayun361 QML ComboBox控件，输入关键字后自动过滤包含关键字的列表，方便快速查找列表项

【人工智能领域】人工智能技术发展历程、核心原理及应用指南：涵盖机器学习、深度学习、NLP和计算机视觉的全面介绍: 内容概要：本文全面介绍了人工智能技术的发展历程、核心技术原理、应用方法及其未来趋势。首先阐述了人工智能的定义和核心目标，随后按时间顺序回顾了其从萌芽到爆发的五个发展阶段。接着详细讲解了机器学习、深度学习、自然语言处理和计算机视觉等核心技术原理，并介绍了使用现成AI服务和开发自定义AI模型的应用方法。此外，还展示了智能客服系统、图像分类应用和智能推荐系统的具体实现案例。针对普通用户，提供了使用大模型的指南和提问技巧，强调了隐私保护、信息验证等注意事项。最后展望了多模态AI、可解释AI等未来发展方向，并推荐了相关学习资源。; 适合人群：对人工智能感兴趣的初学者、技术人员以及希望了解AI技术应用的普通大众。; 使用场景及目标：①帮助初学者快速了解AI的基本概念和发展脉络；②为技术人员提供核心技术原理和应用方法的参考；③指导普通用户如何有效地使用大模型进行日常查询和任务处理。; 其他说明：本文不仅涵盖了AI技术的基础知识，还提供了丰富的实际应用案例和实用技巧，旨在帮助读者全面理解人工智能技术，并能在实际工作中加以应用。同时提醒读者关注AI伦理和版权问题，确保安全合法地使用AI工具。

本学习由 Matrix 工作室制作并开发，包括算法与数据结构的学习路线和各种题解: 本学习由 Matrix 工作室制作并开发，包括算法与数据结构的学习路线和各种题解。

基于智慧图书馆基础业务流程Axure11高保真原型设计: 本项目致力于构建基于微服务架构的智慧图书馆管理平台，重点突破多校区图书馆异构系统间的数据壁垒。通过建立统一数据治理规范、部署智能分析模块、重构业务流程引擎，系统性实现以下建设目标：构建跨馆业务数据的标准化整合通道，实施容器化部署的弹性资源管理体系，开发具备机器学习能力的业务辅助决策系统，打造可量化评估的管理效能提升模型，最终形成支持PB级数据处理的分布式存储体系与全维度数据资产图谱。

mysql中慢sql分析: 根据processlist查询出慢sql 1.修改配置文件中的mysql链接 2.目前是15秒执行一次获取执行时间在5秒上的sql，可以在配置中修改 3.执行后查出的慢sql会记录到log文件夹中以日期命名的txt文件中，可自行查验

全域通航低空经济服务平台建设实施方案.pptx: 全域通航低空经济服务平台建设实施方案.pptx

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

动态删减选项卡的效果示例

评论

发表评论

相关推荐

IE6在打开窗口中提交表单无返回的解决方法

MiniUI - 快速开发WebUI

使用jQuery操作Cookies

回车登录 鼠标焦点到某个具体对象上

页面校验通用js

来自CSDN的js代码大全,害怕忘了(下)

来自CSDN的js代码大全,害怕忘了(上)

javascript 返回上一页

JS 弹出小窗口

页码自动适应范围的分页代码

令人震撼的图片展示效果

上传图片前的预览效果特效

类似MSN提示的页面效果

JS省市二级联动网页特效菜单

距离2008北京奥运会开幕倒计时网页特效[js]

值得收藏的带自动选项卡生成的后台管理界面

动态打开层及关闭层超酷特效

仿GOOGLE个性首页可移动图层效果

仿windows选项卡特效4

JS 图片上传前预览 ImagePreviewd

最近访客更多访客>>

回车登录鼠标焦点到某个具体对象上