本帖最后由 shiyu99 于 2009-5-9 18:44 编辑
大姐我今天有应酬，喝酒有点多了，用记事本写的代码，。没预览过，效果暂时不知道，有问题就回复，我会一一做解答
以下代码是在网页布局时用的div表格布局，你也可以用CSS来编写，把红的字去掉，再在CSSD里编写调用代码即可
<div style="float:left;border:1px solid #fc0056;border-top:20px solid #fc0056;width:300px;height:80px;overflow:hidden;background:#fff; margin-left:10px;margin-bottom:10px;">
</div
以下是一段网页标签代码，也是用记事本写的当然，也可以用老做导航使用，但一般这种效果的导航，只适合用做专题页面使用，比如，新闻中心，图片频道，其他等，效果你复制代码在你电脑上预览了。再下面介绍一种现在网页上非常流行的主页标准导航导航代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>网页特效-用CSS实现的一张图完成的导航条</title>
<style>
ul,li{ list-style:none; float:left;}
body{ font-size:12px; line-height:1.6; font-family:Verdana, "宋体", Arial; text-align:center;}
#info li{ margin-left:4px; margin-top:15px;}
#info a {display:block;text-align:center; padding-left:15px;
padding-top:2px;padding-bottom:1px;background-image:
url(你的标签按钮样式图片URL地址);
background-repeat: no-repeat;color: #000; width:47px; cursor:hand; text-decoration: none;}
#job a:link,#job a:visited{background-position: -62px 0px;}
#eve a:link,#eve a:visited{background-position: -124px 0px;}
#oth a:link,#oth a:visited{background-position: -186px 0px;}
#car a:hover ,#car a:active {background-position: 0px -22px; color:#fff;}
#job a:hover ,#car a:active {background-position: -62px -22px; color:#fff;}
#eve a:hover ,#car a:active {background-position: -124px -22px; color:#fff;}
#oth a:hover ,#car a:active {background-position: -186px -22px; color:#fff;}
</style>
</head>
<body>
<div id="info">
<ul>
<li id="car"><a href="http://www.qpsh.com" target="_blank"><span>游 戏</span></a></li>
<li id="job"><a href="http://www.qpsh.com" target="_blank"><span>娱 乐</span></a></li>
<li id="eve"><a href="http://www.qpsh.com" target="_blank"><span>菜 单</span></a></li>
<li id="oth"><a href="http://www.qpsh.com" target="_blank"><span>好 玩</span></a></li>
</ul>
</div>
还没写完，正在发贴编辑器上，等下还有 呵呵
一下是一段现在网站上常用的主页导航条，代码。，由于我是直接用记事本编写，效果还没看见过，素仪我没办法截图，你可以包袱制代码，粘贴到本地电脑里的HTML，L文件进行预览，如果效果没出来，请回复，我免费做修改。
我现在给他写的代码，效果就是，很多大门户站里使用的导航条，
以下的图片地址，就是这导航条的按钮效果图片，你自己画图了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>诗雨 没心事做写的，</title>
<style type="text/css">
body {
color: #333;
background: url(body_bg.jpg) repeat-x #deebf3;
text-align: center;
font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
}
a:link, a:visited {
color: #333;
text-decoration: none;
}
/* Nav
==========================================================*/
.nav {
position: relative;
margin: 0 10px 10px;
background: url(图片地址) no-repeat 0 -36px;
}
.navinner {
background: url(图片地址) no-repeat 100% -72px;
}
.navlist {
height: 36px;
line-height: 36px;
overflow: hidden;
margin: 0 10px;
background: url(图片地址) repeat-x 0 0;
}
.nav li {
float: left;
display: inline;
margin: 0 0 0 -2px;
padding: 0 4px 0 6px;
background: url(图片地址) no-repeat 0 -108px;
}
.nav a {
display: block;
width: 102px;
text-align: center;
font-size: 120%;
}
.nav a:link, .nav a:visited {
color: #FF0000;
}
.nav a.current, .nav a:hover, .nav a:active {
color: #ffOOOO;
font-weight: bold;
background: url(图片地址) no-repeat 50% -144px;
}
.subnav {
position: absolute;
top: 41px;
left: 0;
float: left;
height: 27px;
line-height: 27px;
white-space: nowrap;
background: url(图片地址) no-repeat 0 -180px;
}
* html .subnav {
margin: 0 10px 0 -10px; /* IE 6 and below */
}
.subnav p {
padding: 0 10px;
background: url(图片地址) no-repeat 100% -234px;
}
.subnav p span {
display: block;
background: url(图片地址) repeat-x 0 -207px;
}
.subnav p.pointer {
position: absolute;
top: -4px;
left: 0;
height: 5px;
width: 11px;
padding: 0;
margin-left: 20px;
text-indent: -999em;
background: url(图片地址) repeat-x 0 -261px;
}
.subnav a {
display: inline;
padding: 0;
font-size: 100%;
}
[class~="subnav"] a {
padding: 0 3px;
}
.subnav, .subnav a:link, .subnav a:visited {
color: #235e99;
}
.subnav a:hover, .subnav a:active {
color: #235e99;
}
.subnav a:hover, .subnav a:active {
font-weight: normal;
background: none;
border-bottom: 2px solid;
}
/* subnav position and pointer position */
#subnav1 { left: 120px; }
#subnav2 { left: 230px; }
#subnav3 { left: 340px; }
#subnav4 { left: 450px; }
#subnav5, #subnav6, #subnav7 {
left: auto;
right: 0px;
}
#subnav1 .pointer,
#subnav2 .pointer,
#subnav3 .pointer,
#subnav4 .pointer { left: 30px; }
#subnav5 .pointer { left: auto; right: 290px; }
#subnav6 .pointer { left: auto; right: 180px; }
#subnav7 .pointer { left: auto; right: 70px; }
#subnav1, #subnav2, #subnav3, #subnav4 {
min-width: 110px;
}
#subnav5 { min-width: 340px; }
#subnav6 { min-width: 240px; }
#subnav7 { min-width: 130px; }
/* Note
==========================================================*/
.note {
margin: 0 15px 10px;
color:#666666;
}
.note span{
float:right;
}
.disable {
display: none;
}
</style>
<script>
function isMatch(str1,str2)
{
var index = str1.indexOf(str2);
if(index==-1) return false;
return true;
}
function ResumeError() {
return true;
}
window.onerror = ResumeError;
function $(id) {
return document.getElementById(id);
}
function showMenu (baseID, divID) {
baseID = $(baseID);
divID = $(divID);
//var l = GetOffsetLeft(baseID);
//var t = GetOffsetTop(baseID);
//divID.style.left = l + 'px';
// divID.style.top = t + baseID.offsetHeight + 'px';
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = 'block';
showMenu.cur = divID;
if (! divID.isCreate) {
divID.isCreate = true;
//divID.timer = 0;
divID.onmouseover = function () {
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = 'block';
};
function hide () {
showMenu.timer = setTimeout(function () {divID.style.display = 'none';}, 1000);
}
divID.onmouseout = hide;
baseID.onmouseout = hide;
}
function hideCur () {
showMenu.cur && (showMenu.cur.style.display = 'none');
}
}
</script>
</head>
<body>
<div class="nav">
<div class="navinner">
<ul class="navlist">
<li><a href="#">样式链接</a></li>
<li><a href="#" id="nav_1">新闻资讯</a>
<div class="subnav disable" id="subnav1">
<p class="pointer">.</p>
<p><span>
<a href="#">业界动态</a> |
<a href="#">收购融资</a> |
<a href="#">门户动态</a> |
<a href="#">搜索引擎</a> |
<a href="#">网络游戏</a> |
<a href="#">电子商务</a> |
<a href="#">广告传媒</a> |
<a href="/#">厂商开发</a>
</span></p>
</div>
</li>
<li><a href="#" id="nav_2">站长在线</a>
<div class="subnav disable" id="subnav2">
<p class="pointer">.</p>
<p><span>
<a href="#">好站推荐</a> |
<a href="#">站长聚会</a> |
<a href="#">站长访谈</a> |
<a href="#">站长茶馆</a> |
<a href="#">网站排行</a>
</span></p>
</div>
</li>
<li><a href="#" id="nav_3">网站运营</a>
<div class="subnav disable" id="subnav3">
<p class="pointer">.</p>
<p><span>
<a href="#">建站经验</a> |
<a href="#">策划盈利</a> |
<a href="/Webbiz/Seo/Index.html">搜索优化</a> |
<a href="#">网站推广</a> |
<a href="#">免费资源</a>
</span></p>
</div>
</li>
<li><a href="#" id="nav_4">设计在线</a>
<div class="subnav disable" id="subnav4">
<p class="pointer">.</p>
<p><span>
<a href="#">酷站推荐</a> |
<a href="#">网页设计</a> |
<a href="#">WEB标准</a> |
<a href="/Design/Video/Index.html">视频处理</a> |
<a href="#">设计活动</a>
</span></p>
</div>
</li>
<li><a href="#" id="nav_5">网络编程</a>
<div class="subnav disable" id="subnav5">
<p class="pointer">.</p>
<p><span>
<a href="#">Asp编程</a> |
<a href="#"> hp编程</a> |
<a href="#">.Net编程</a> |
<a href="#">Xml编程</a> |
<a href="#">Access</a> |
<a href="#">Mssql</a> |
<a href="#">Mysql</a>
</span></p>
</div>
</li>
<li><a href="#" id="nav_6">联盟资讯</a>
<div class="subnav disable" id="subnav6">
<p class="pointer">.</p>
<p><span>
<a href="#">联盟新闻</a> |
<a href="#">联盟介绍</a> |
<a href="#">联盟点评</a> |
<a href="#">网赚技巧</a>
</span></p>
</div>
</li>
<li><a href="#" id="nav_7">服务器</a>
<div class="subnav disable" id="subnav7">
<p class="pointer">.</p>
<p><span>
<a href="#">Web服务器</a> |
<a href="#">Ftp服务器</a> |
<a href="#">Mail服务器</a> |
<a href="#">Dns服务器</a> |
<a href="#">Win服务器</a> |
<a href="#">Linux服务器</a> |
<a href="#">安全防护</a>
</span></p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
图片简单美化，让他和FLASH图片效果也差不多
<script LANGUAGE="Javascript">
i=0;
function f_wave()
{i=i-4;
showimg.style.filter="Wave(Freq=1,LightStrength=20,Phase=" + i + ")";
setTimeout("f_wave()",100);
}
window.onload=f_wave;</script>
<IMG src="HTTP://WWW.QPSH.COM/IMAGES/logo.jpg" ID=showimg>
网站主页右下角弹出一个类似QQ的小信息弹窗，也像新郎博客那样
<script>
/**---------------------------------------------------------------------------
* by www.qpsh.com;
*/
{
var ua = navigator.userAgent;
var $IE = (navigator.appName == "Microsoft Internet Explorer");
var $IE5 = $IE && (ua.indexOf('MSIE 5') != -1);
var $IE5_0 = $IE && (ua.indexOf('MSIE 5.0') != -1);
var $Gecko = ua.indexOf('Gecko') != -1;
var $Safari = ua.indexOf('Safari') != -1;
var $Opera = ua.indexOf('Opera') != -1;
var $Mac = ua.indexOf('Mac') != -1;
var $NS7 = ua.indexOf('Netscape/7') != -1;
var $NS71 = ua.indexOf('Netscape/7.1') != -1;
if ($Opera) {
$IE = true;
$Gecko = false;
$Safari = false;
}
if ($IE5) {
$IE = true;
$Gecko = false;
$Safari = false;
}
}
function $_t(root,tag,id){
var ar=root.getElementsByTagName(tag);
for (var i=0;i<ar.length;i++){
if (ar.id==id) return ar;
}
return null;
}
function _(root){
var ids=arguments;
var i0=0;
if (typeof(root) == 'string') root = document;
else i0=1;
for (var i=i0;i<ids.length;i++){
var s=root.getElementsByTagName("*");
var has=false;
for (var j=0;j<s.length;j++){
if (s[j].id==ids){
root=s[j];
has=true;
break;
}
}
if (!has) return null;
}
return root;
}
//util
function $dele(o,fn,rv){
var r = function (){
var s=arguments.callee;
var args = [];
for (var i=0;i<s.length;i++) args=s;
var argStr = args.join(",");
if (argStr.length > 0) argStr=","+argStr;
var callStr="s.thiz[s.fn]("+argStr+")";
var v=eval(callStr);
if (s.rv!=null) {
return s.rv;
} else {
return v;
}
}
r.thiz=o;
r.fn=fn;
r.rv=rv;
return r;
}
function $ge(e){
if (e!=null) return e;
if ($IE) {
return window.event;
} else return e;
}
/**
* get event for a element;
*/
function $gte(e,ev){
if (!e.getElementById) e=e.ownerDocument;
if ($IE) {
return ev!=null ? ev : e.parentWindow.event;
} else {
return ev;
throw new Error("this method can only execute in IE");
}
}
function $addEL(n,e,l,b){
if ($IE){
if (n["$__listener_"+e]==null){
var lst=function (e){
var f=arguments.callee;
var ar=f.fList;
e=$ge(e);
for (var i=0;i<ar.length;i++){
ar(e);
}
}
lst.fList=[];
n["$__listener_"+e]=lst;
n["on"+e]=n["$__listener_"+e];
}
var fList=n["$__listener_"+e].fList;
fList[fList.length]=l;
} else {
n.addEventListener(e,l,b);
}
}
function $cancelEvent (e) {
if ($IE) {
e.returnValue = false;
e.cancelBubble = true;
} else
e.preventDefault();
};
function $cpAttr(o,p){
for (var i in p){
var s=p;
o=s;
}
return o;
}
function $getValue(v,d){
return v==null ? d : v;
}
var $gv=$getValue;
var $dom={
parseInt : function(s) {
if (s == null || s == '' || typeof(s)=='undefined')
return 0;
return parseInt(s);
},
getClientSize : function(n){
if ($IE){
//ts("this is ie");
var s= {x:n.clientLeft,y:n.clientTop};
s.l=s.x;
s.t=s.y;
s.r=n.clientRight;
s.b=n.clientBottom;
s.w=n.clientWidth;
s.h=n.clientHeight;
//tr("calculated client size");
return s;
} else {
var t=n.style;
if (t.borderLeftWidth.length==0 || t.borderTopWidth.length==0 || t.borderRightWidth.length==0 || t.borderBottomWidth.length==0){
var l=n.offsetWidth;
t.borderLeftWidth="0px";
l-=n.offsetWidth;
var r=n.offsetWidth;
t.borderRightWidth="0px";
r-=n.offsetWidth;
var o=n.offsetHeight;
t.borderTopWidth="0px";
o-=n.offsetHeight;
var b=n.offsetHeight;
t.borderBottomWidth="0px";
b-=n.offsetHeight;
t.borderLeftWidth=l+"px";
t.borderTopWidth=o+"px";
t.borderRightWidth=r+"px";
t.borderBottomWidth=b+"px";
var s={l:l,r:r,t ,b:b,x:l,y};
return s;
} else {
var s= {
x: this.parseInt(n.style.borderLeftWidth),
y: this.parseInt(n.style.borderTopWidth),
r: this.parseInt(n.style.borderRightWidth),
b: this.parseInt(n.style.borderBottomWidth)
};
s.l=s.x;
s.t=s.y;
return s;
}
}
},
getSize : function (n,withMargin){
var c={
x : n.offsetWidth != null ? n.offsetWidth : 0,
y : n.offsetHeight != null ? n.offsetHeight : 0
};
//c.x=this.parseInt(c.x);
//c.y=this.parseInt(c.y);
//tr("get size for : "+n.id);
//tra(c);
if (withMargin) {
var m=this.getMargin(n);
c.x+=m.l+m.r;
c.y+=m.t+m.b;
}
//tra(m);
//tr("get size for : "+n.id);
//tra(c);
return c;
},
setSize : function(elmt,x,y,withMargin){
//tf("$dom::setSize");
//if (elmt==undefined || elmt.style.display=="none") return;
if ($IE){
if (withMargin){
var m=this.getMargin(elmt);
x-=m.l+m.r;
y-=m.t+m.b;
}
elmt.style.width=x;
elmt.style.height=y;
} else {
var clientSize=this.getClientSize(elmt);
var dx=clientSize.l+clientSize.r;
var dy=clientSize.t+clientSize.b;
elmt.style.width=x-dx+"px";
elmt.style.height=y-dy+"px";
}
},
/**
* get the context position relative to its parent.
*/
getPosition : function (elmt,withMargin){
var c;
c={
x:elmt.offsetLeft,
y:elmt.offsetTop
};
//c.x=this.parseInt(c.x);
//c.y=this.parseInt(c.y);
if (withMargin){
var m=this.getMargin(elmt);
c.x-=m.l;
c.y-=m.t;
}
return c;
},
setPosition : function (elmt,x,y,withMargin){
//tf("$dom::setPosition");
if (withMargin){
//var m=this.getMargin(elmt);
//x-=m.l;
//y-=m.t;
}
elmt.style.left=x+"px";
elmt.style.top=y+"px";
},
setAlpha : function (n,a){
return;
n.style.filter = "progid XImageTransform.Microsoft.Alpha(opacity="+a*100+");";
n.style.opacity = a;
n.style.MozOpacity = a;
}
}
var $motion={
smooth : function (s, e, t){
if (t>1) t=1;
return (e - s) * t + s;
}
}
function PopUp(id, config){
this.id=id;
var c = this.config = config;
c.width = $gv(c.width,300);
c.height = $gv(c.height,200);
c.bottom = $gv(c.bottom,0);
c.right = $gv(c.right,20);
c.display = $gv(c.display,true);
c.contentUrl= $gv(c.contentUrl,"");
c.motionFunc= $gv(c.motionFunc,$motion.smooth);
c.position = {x:0,y:0};
var t=c.time;
t.slideIn = $gv(t.slideIn,10);
t.hold = $gv(t.hold,10);
t.slideOut = $gv(t.slideOut,10);
t.slideIn *= 1000;
t.hold *= 1000;
t.slideOut *= 1000;
this.container = document.body;
this.popup = null;
this.content = null;
this.switchButton = null;
this.moveTargetPosition = 0;
this.startMoveTime = null;
this.startPosition = null;
this.status = PopUp.STOP;
this.intervalHandle = null;
this.mm = "max";
this.imgMin = "http://www.sinaimg.cn/blog/html/2007-06-28/U814P346T1D1076F6DT20070725145920.gif";
this.imgMax = "http://www.sinaimg.cn/blog/html/2007-06-28/U814P346T1D1076F352DT20070725145920.gif";
}
//static members
PopUp.STOP = 0;
PopUp.MOVE_DOWN = 1;
PopUp.MOVE_UP = 2;
PopUp.SWITCH_TO_MIN = PopUp.MOVE_DOWN | 4;
PopUp.SWITCH_TO_MAX = PopUp.MOVE_UP | 8;
var __o={
create : function (){
var doc=document;
var c=this.config;
//create popup holder & config it.
var p = this.popup = doc.createElement("div");
this.container.appendChild(p);
p.id=this.id;
p.style.cssText="position:absolute;\
z-index:9000;\
overflow:hidden;\
border:0px solid #f00;\
";
$dom.setSize(p, c.width, c.height);
//create popup content holder & config it.
var t = this.content = doc.createElement("div");
p.appendChild(t);
t.id = this.id+"_content";
t.style.cssText="position:absolute;\
z-index:1;\
overflow:hidden;";
$dom.setSize(t, c.width, c.height);
$dom.setPosition(t,0,0);//add
c.position.y = c.height;//add
this.onresize();//add
//$dom.setPosition(t, 0, c.height);//hide it at first
// create content holder's content.
// a close button & an iframe for loading external content.
t.innerHTML = "<a id='closeButton' href='#'></a>"+
"<a id='switchButton' href='#'></a>"+
"<iframe id='"+this.id+"_content_iframe' src="+c.contentUrl+" frameborder=0 scrolling=no width='100%' height='100%' style='height:100%'></iframe>";
var sBtn = this.switchButton = $_t(t,'a',"switchButton");
sBtn.style.cssText='position:absolute;\
z-index:2;\
\
font-size:0px;\
line-height:0px;\
\
left:220px;\
top:6px;\
width:15px;\
height:15px;\
\
background-image:url("http://www.sinaimg.cn/blog/html/2007-06-28/U814P346T1D1076F6DT20070725145920.gif");';
$addEL(sBtn,"click",$dele(this,"switchMode"),true);
$addEL(sBtn,"click",$cancelEvent,true);
var btn = $_t(t,'a',"closeButton");
btn.style.cssText='position:absolute;\
z-index:2;\
\
font-size:0px;\
line-height:0px;\
\
left:240px;\
top:6px;\
width:15px;\
height:15px;\
\
background-image:url("http://www.sinaimg.cn/blog/html/2007-06-28/U814P346T1D1076F354DT20070725152720.gif");';
$addEL(btn,"mouseover",function (e){
$dom.setAlpha(this,0.4);
},true);
$addEL(btn,"mouseout",function (e){
$dom.setAlpha(this,1);
},true);
$addEL(btn,"click",$dele(this,"hide"),true);
$addEL(btn,"click",$cancelEvent,true);
var container=$IE ? document.body : document.documentElement;
$addEL(document.body,"resize",$dele(this,"onresize"),true);
this.__hackTimer=window.setInterval("__popup.onresize()",50);
$addEL(container,"scroll",$dele(this,"onresize"),true);
//initialize position at once.
this.onresize();
},
show : function (){
if (!this.config.display) return;
this.moveTargetPosition = 0;
this.status = PopUp.MOVE_UP;
this.startMove();
},
hide : function (){
this.moveTargetPosition = this.config.height;
this.status = PopUp.MOVE_DOWN;
this.startMove();
},
minimize : function (){
//alert("minimize");
this.mm = "min";
this.moveTargetPosition = this.config.height - 28;
this.status = PopUp.SWITCH_TO_MIN;
this.startMove();
var s = this.switchButton.style;
var bg = s.backgroundImage;
if (bg.indexOf(this.imgMin) > -1) {
bg = bg.replace(this.imgMin,this.imgMax);
s.backgroundImage = bg;
}
},
maximize : function (){
//alert("maximize");
if (!this.config.display) return;
this.mm = "max";
this.moveTargetPosition = 0;
this.status = PopUp.SWITCH_TO_MAX;
this.startMove();
var s = this.switchButton.style;
var bg = s.backgroundImage;
if (bg.indexOf(this.imgMax) > -1) {
bg = bg.replace(this.imgMax,this.imgMin);
s.backgroundImage = bg;
}
},
delayHide : function (){
window.setTimeout("__popup.hide()",this.config.time.hold);
},
delayMin : function (){
window.setTimeout("__popup.minimize()",this.config.time.hold);
},
switchMode : function (){
//alert("switch");
if (this.mm == "min"){
this.maximize();
} else {
this.minimize();
}
},
startMove : function (){
this.stopMove();
this.intervalHandle = window.setInterval("__popup.move()",100);
this.startMoveTime = new Date().getTime();
//this.startPosition = $dom.getPosition(this.content).y;//parseInt(this.content.style.top);
this.startPosition = this.config.position.y;
},
stopMove : function (){
if (this.intervalHandle != null) window.clearInterval(this.intervalHandle);
this.intervalHandle = null;
},
move : function (){
var t = new Date().getTime();
t = t - this.startMoveTime;
var total = this.status & PopUp.MOVE_UP ?
this.config.time.slideIn :
this.config.time.slideOut;
var y = this.config.motionFunc(this.startPosition, this.moveTargetPosition, t/total);
//this.content.style.top = y + "px";
this.config.position.y = y;
this.onresize();
if (t >= total){
this.onFinishMove();
}
},
onFinishMove : function (){
this.stopMove();
//this.content.style.top = this.moveTargetPosition + "px";
if (this.status == PopUp.MOVE_UP && this.config.time.hold > 0 ){
this.delayMin();
} else {
if (this.__hackTimer!=null) window.clearInterval(this.__hackTimer);
}
this.status = PopUp.STOP;
},
onresize : function (){
var c=this.config;
//var t=document.documentElement;
var t=document.body;
var dx=t.clientWidth + t.scrollLeft;
var dy=t.clientHeight + t.scrollTop;
var x = dx - c.right - c.width ;
var y = dy - c.bottom - c.height + c.position.y;
$dom.setPosition(this.popup, x, y);
$dom.setSize(this.popup, c.width, c.height-c.position.y);
}
}
$cpAttr(PopUp.prototype,__o);
/*---------------------------------------*/
function readCookie(name)
{
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0)
{
offset = document.cookie.indexOf(search);
if (offset != -1)
{
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}
function writeCookie(name, value, hours)
{
var expire = "";
if(hours != null)
{
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape(value) + expire + ";path=/";
}
/**
* main function to config the pop-up window & run it.
* web deployer change codes here to manipulte popups performance.
* & should not change codes out of this function.
*/
function job(){
/**
* config object
*/
var cfg={
//width & height of the popup window ,these values should be determined debpended on inner contents.
width : 260,
height : 190,
//distance to the bottom & the right edge.
bottom : 2,
right : 19,
//switch of displaying the popup
display : true,
//content url
contentUrl : "http://blog.sina.com.cn/lm/mini/01.html",
//time configuration,in seconds
time : {
slideIn : 1,
hold : 60,
slideOut : 1
}
}
//at what time the popup should display,in hours : 0~23,
//the number after add symbol means after how many the hours to display popup for the next time.
var displayTimeList = ["7+7"];
// the popup displays each time thie page reload or only once at the first time page loaded.
// once / eachTime
//var displayMode = "once";
var displayMode = "eachTime";
//cookie name storing the next time to display popup
var cookieName="sina_blog_popup_next_display_time";
/**
* --------------------- from here below, the codes should NOT be modified.
*/
var hours={};
var delays=[];
for (var i=0;i<displayTimeList.length;i++) {
var o = displayTimeList;
var ar = o.split("+");
var t = parseInt(ar[0]);
for (var m=0;m<ar.length-1;m++){
ar[m]=ar[m+1];
}
hours[t]=true;
for (var j=0;j<ar.length;j++){
hours[t + parseInt(ar[j])]=true;
}
}
displayTimeList=[];
for (var i in hours){
var s = parseInt(i);
if (isNaN(s)) continue;
displayTimeList[displayTimeList.length]=s;
}
displayTimeList = displayTimeList.sort();
//alert(displayTimeList);
var pp = new PopUp("xp", cfg);
window.__popup=pp;
pp.create();
//display:
var n=readCookie(cookieName);
if (displayMode=="eachTime")
pp.show();
else {
var tm=new Date().getTime();
if (n==null || tm>n) {
pp.show();
//get next display time
var hr=new Date().getHours();
var f = 60*60*1000;
var l = displayTimeList.concat(), len = l.length;
for (var i = 0; i < len; i++) l[len + i] = l + 24;
for (var i = 0; i < l.length && hr >= l; i++);
var dt = new Date();
dt.setHours(l > 23 ? l - 24 : l);
var nextTime = dt.getTime();
if (l > 23) nextTime += f * 24 ;
writeCookie(cookieName, nextTime, 24);
}
}
}
function doit(){
if(document.readyState == 'loaded' || document.readyState == 'complete'){
job();
}else{
window.setTimeout(doit,500);
return;
}
}
doit();
</script> |
