改善用户体验之alert
<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)
{
if(!e)
e=window.event;
var source=null;
if(e.target)
source=e.target;
else
source=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>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效观止|---腾讯QQ网页在线客服，随网页滚动条上下移动的效果一</title>
</head>
<body>
<DIV id=divStay style="POSITION: absolute">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=top width="7%"> </TD></TR></TBODY></TABLE></DIV>
<SCRIPT language=javascript>
function picsize(obj,MaxWidth){
img=new Image();
img.src=obj.src;
if (img.width>MaxWidth)
{
return MaxWidth;
}
else
{
return img.width;
}
}
function CloseQQ()
{
divStayTopleft.style.display="none";
return true;
}
var online= new Array();
</SCRIPT>
<div id="divStayTopleft" style="POSITION: absolute">
<table cellspacing="0" cellpadding="0" width="109" border="0">
<tr>
<td colspan="3">
<a onclick="CloseQQ()" href="javascript:;" shape="circle" coords="91,16,12">
<img height="34" src="http://www.jscode.cn/Uploadfile/qq_top.gif" width="109" usemap="#Map" border="0"></a></td>
</tr>
<tr>
<td width="6"><img height="100" src="http://www.jscode.cn/Uploadfile/qq_life.gif" width="6"></td>
<td valign="top" width="96" background="www.jscode.cn/Uploadfile/qq_bg.gif">
<table cellspacing="0" cellpadding="0" width="90" align="center" border="0">
<tr>
<td height="30">
<table cellspacing="0" cellpadding="0" width="90" border="0">
<tr>
<td>
<img height="13" src="http://www.jscode.cn/Uploadfile/qq_ico1.gif" width="16"><span class="font_12">
<span style="font-size: 9pt">客户服务</span></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" width="100%" cellpadding="2" id="table47">
<tr>
<td width="15" valign="top" height="23">
<img border="0" src="http://www.jscode.cn/Uploadfile/qq_v01.gif" width="16" height="16"></td>
<td valign="bottom"><script>document.write("<a target=blank href=tencent://message/?uin=615050000&Site=网页特效观止&Menu=yes><img border=0 SRC=http://wpa.qq.com/pa?p=1:615050000:10 alt=[小Q]></a>");</script></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<table border="0" width="100%" cellpadding="2" id="table47">
<tr>
<td width="15" valign="top" height="23">
<img border="0" src="http://www.jscode.cn/Uploadfile/qq_n01.gif" width="16" height="16"></td>
<td valign="bottom"><script>document.write("<a target=blank href=tencent://message/?uin=43486831&Site=网页特效观止&Menu=yes><img border=0 SRC=http://wpa.qq.com/pa?p=1:43486831:10 alt=[这是在远方原来的qq被现在这个人盗了]></a>");</script></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<td width="7"><img height="100" src="http://www.jscode.cn/Uploadfile/qq_right.gif" width="7"></td>
</tr>
<tr>
<td colspan="3">
<img height="30" src="http://www.jscode.cn/Uploadfile/qq_bottom1.gif" width="109"></td>
</tr>
<tr>
<td colspan="3">
<img height="33" src="http://www.jscode.cn/Uploadfile/qq_logo.gif" width="109"></td>
</tr>
</table>
</div>
<script type="text/javascript">
function FloatTop()
{
var startX1 =document.body.offsetWidth-125 ,startY1 = 5;
var startX2 =0,startY2 = 95;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id,startX,startY)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
el.y = startY;
return el;
}
window.stayTopLeft=function()
{
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY1 - ftlObj.y)/8;
ftlObj1.y += (pY + startY2 - ftlObj1.y)/8;
ftlObj.sP(document.body.scrollLeft+document.body.offsetWidth-125, ftlObj.y);
ftlObj1.sP(ftlObj1.x, ftlObj1.y);
setTimeout("stayTopLeft()", 30);
}
// ftlObj = ml("divStay",document.body.scrollLeft+document.body.offsetWidth-125,0);
// ftlObj1 = ml("divStayTopLeft",0,30);
ftlObj = ml("divStay",(document.body.scrollLeft+document.body.offsetWidth)/2+379,0);
ftlObj1 = ml("divStayTopLeft",(document.body.scrollLeft+document.body.offsetWidth)/2+379,30);
stayTopLeft();
}
FloatTop();
</script>
<!--End: QQ在线客服 -->
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
