- 浏览: 182444 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (153)
- 小技巧 (14)
- spring (3)
- struts2 (20)
- hibernate (0)
- java api (2)
- java se (8)
- jsp/servlet (4)
- oracle (0)
- mysql (1)
- ms sqlserver (1)
- js (30)
- jquery (8)
- ajax (2)
- .net (1)
- 软件 (1)
- j2ee (25)
- 网址收藏 (3)
- web综合 (9)
- web打印控件 (3)
- fckeditor (2)
- Groovy (1)
- PHP (5)
- 项目管理 (1)
- SEO (1)
- PostgreSQL (5)
- CKeditor (1)
- Fusion chart (1)
- 网页播放器 (1)
- 曾遇bug (3)
- java日志 (1)
- linux/Unix/CentOs (5)
- VBA (1)
- C# (0)
- 日期控件 (1)
- tomcat (2)
- cookies (1)
- java7 (1)
- JAVA文件操作 (2)
- hibernate;ehcache (2)
- 缓存 (1)
- dd (0)
- DB (1)
- android (2)
最新评论
-
flyingbin:
沙发,不过从头到尾没怎么看懂~
Windows密码本地破解通用方法 -
jfeimao:
credentialsToPrincipalResolvers ...
CAS(单点登陆)---总结一 -
haige18:
这两张图片引用的是网易的地址,现在资源有可能被删除了,所以就显 ...
Struts2中的Value Stack/Stack Context -
fengzhisha0914:
我的图片也不显示了..为何...
Struts2中的Value Stack/Stack Context -
greatwqs:
java.lang.IllegalStateException ...
java.lang.IllegalStateException:Cannot forward after response has been committed
<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
发表评论
-
IE6在打开窗口中提交表单无返回的解决方法
2012-06-15 15:47 803最近项目中使用了window.open()函数打开新窗口,并 ... -
MiniUI - 快速开发WebUI
2012-05-23 16:31 1153http://www.miniui.com/ ... -
使用jQuery操作Cookies
2012-04-25 11:19 825Cookies是一种能够让网站服务器把少量数据储存到客户端的硬 ... -
回车登录 鼠标焦点到某个具体对象上
2010-12-15 22:09 863<script language="javas ... -
页面校验通用js
2010-11-22 10:45 1084/**************************** ... -
来自CSDN的js代码大全,害怕忘了(下)
2010-10-30 15:35 686写道 //图象按比例 <script languag ... -
来自CSDN的js代码大全,害怕忘了(上)
2010-10-30 15:27 1007写道 事件源对象 event.srcElement.tagN ... -
javascript 返回上一页
2010-10-30 13:33 8181. history.go(-1), 返回两个页面: hi ... -
JS 弹出小窗口
2010-10-30 13:15 923<body> <div ali ... -
页码自动适应范围的分页代码
2010-10-30 12:55 653http://www.alixixi.com/Dev/Web/ ... -
令人震撼的图片展示效果
2010-10-30 12:52 607http://www.alixixi.com/Dev/HTML ... -
上传图片前的预览效果特效
2010-10-30 12:46 856<script> function yulan( ... -
类似MSN提示的页面效果
2010-10-30 12:40 654<html> <head> < ... -
JS省市二级联动网页特效菜单
2010-10-30 12:25 835<html> <head> ... -
距离2008北京奥运会开幕倒计时网页特效[js]
2010-10-30 12:17 853距离北京奥运会开幕还有 <br> <ht ... -
值得收藏的带自动选项卡生成的后台管理界面
2010-10-30 12:00 853<!DOCTYPE html PUBLIC " ... -
动态打开层及关闭层超酷特效
2010-10-30 11:56 797动画打开层及关闭层效果,可拖动层.以下是HTML网页特效代码 ... -
仿GOOGLE个性首页可移动图层效果
2010-10-30 11:48 860<html> <head> < ... -
仿windows选项卡特效4
2010-10-30 11:30 774<!DOCTYPE HTML PUBLIC " ... -
JS 图片上传前预览 ImagePreviewd
2010-10-27 21:14 1292JS文件CJL.0.1.min.js内容如下: eval_r ...
相关推荐
选项卡自动生成代码,动态删减选项卡的效果示例
实现表格/表单动态删减功能,以及实现粘贴excle表格数据,即可自动解析成每行数据
类似钉钉中的物品领用以及网页中的教育经历增减效果。删除中间的能够使后项顺序前移,新增项目不会出现删减项的默认值。
主要介绍了jquery动态增加删减表格行特效实现代码,
凯立德地图删减程序 可以把不需要的地方地图删除。减少空间
不健全关系删减部分(1234567890).zip
本文实例讲述了js实现input框文字动态变换显示效果。分享给大家供大家参考。具体如下: 这里演示js实现INPUT框中的特殊显示效果,一些文字慢慢交替显示,最终显示出完整的文字,需要显示的文字预先保存在数组中,...
开源TeamTalk(mogutt), 2015年5月前原版未删减代码 !!
详尽的easyui操作示例,便于新手测试学习应用,代码示例使用C#编写,可以方便的编译调测!
collectionviewcell重排序和删减,可以拖动排序,并且可以在拖动到顶部和底部时可以滚动。源码地址:https://github.com/wxp2012/XPCollectionViewCellsSort
Unity Android 之 Unity Android 交互(aar形式)动态申请权限功能实现(权限可人为怎加删减,并含代码工程) 1、Unity Android aar 包交互,实现动态权限申请 2、Unity 端可以根据需要添加自己的权限申请 3、权限有...
软件需求分析报告模板(无删减版)
删减与更改.docx
全球指数删减.csv
教材书籍 运筹学导论_第8版(内容:第9版删减的章节).pdf
数电实验(删减版).pdf数电实验(删减版).pdf数电实验(删减版).pdf数电实验(删减版).pdf数电实验(删减版).pdf数电实验(删减版).pdf数电实验(删减版).pdf数电实验(删减版).pdf数电实验(删减版).pdf
ShopNC[B2B2C]电商平台未删减版:含手机触屏版+团购+在线客服插件+API接口+微商城
人工智能删减版.pdf