本页主题: 给论坛加一个可以拖动的公告栏 打印 | 加为IE收藏 | 复制链接 | 收藏主题 | 上一主题 | 下一主题

lixiang
级别: 新手上路


精华: 1
发帖: 2
威望: 9 点
金钱: 40 RMB
贡献值: 0 点
注册时间:2007-04-25
最后登录:2007-04-27

 给论坛加一个可以拖动的公告栏

先看下效果


效果演示:http://jhc.c.lunqun.com

制作过程:
1修改下面的JS代码。。红色部分为公告内容

document.writeln("<html>");
document.writeln("<body>");
document.writeln("<script language=\"javascript\">");
document.writeln("var IE5=(document.getElementById && document.all)? true : false;");
document.writeln("var W3C=(document.getElementById)? true: false;");
document.writeln("var currIDb=null, currIDs=null, xoff=0, yoff=0; zctr=0; totz=0;");
document.writeln("<!-- 此特效由金汉城论坛编辑制作-->");
document.writeln("<!-- 奥天软件:http:\/\/www.aosky.net-->");
document.writeln("function trackmouse(evt){");
document.writeln("if((currIDb!=null) && (currIDs!=null)){");
document.writeln("var x=(IE5)? event.clientX+document.body.scrollLeft : evt.pageX;");
document.writeln("var y=(IE5)? event.clientY+document.body.scrollTop : evt.pageY;");
document.writeln("currIDb.style.left=x+xoff+\'px\';");
document.writeln("currIDs.style.left=x+xoff+10+\'px\';");
document.writeln("currIDb.style.top=y+yoff+\'px\';");
document.writeln("currIDs.style.top=y+yoff+10+\'px\';");
document.writeln("return false;");
document.writeln("}}");
document.writeln("");
document.writeln("function stopdrag(){");
document.writeln("currIDb=null;");
document.writeln("currIDs=null;");
document.writeln("NS6bugfix();");
document.writeln("}");
document.writeln("");
document.writeln("function grab_id(evt){");
document.writeln("xoff=parseInt(this.IDb.style.left)-((IE5)? event.clientX+document.body.scrollLeft : evt.pageX);");
document.writeln("yoff=parseInt(this.IDb.style.top)-((IE5)? event.clientY+document.body.scrollTop : evt.pageY);");
document.writeln("currIDb=this.IDb;");
document.writeln("currIDs=this.IDs;");
document.writeln("}");
document.writeln("");
document.writeln("function NS6bugfix(){");
document.writeln("if(!IE5){");
document.writeln("self.resizeBy(0,1);");
document.writeln("self.resizeBy(0,-1);");
document.writeln("}}");
document.writeln("");
document.writeln("function incrzindex(){");
document.writeln("zctr=zctr+2;");
document.writeln("this.subb.style.zIndex=zctr;");
document.writeln("this.subs.style.zIndex=zctr-1;");
document.writeln("}");
document.writeln("");
document.writeln("function createPopup(id, title, width, height, x , y , isdraggable, boxcolor, barcolor, shadowcolor, text, textcolor, textptsize, textfamily ){");
document.writeln("if(W3C){");
document.writeln("zctr+=2;");
document.writeln("totz=zctr;");
document.writeln("var txt=\'\';");
document.writeln("txt+=\'<div id=\"\'+id+\'_s\" style=\"position:absolute; left:\'+(x+10)+\'px; top:\'+(y+10)+\'px; width:\'+width+\'px; height:\'+height+\'px; background-color:\'+shadowcolor+\'; filter:alpha(opacity=50); visibility:visible\"> <\/div>\';");
document.writeln("txt+=\'<div id=\"\'+id+\'_b\" style=\"border:outset \'+barcolor+\' 2px; position:absolute; left:\'+x+\'px; top:\'+y+\'px; width:\'+width+\'px; overflow:hidden; height:\'+height+\'px; background-color:\'+boxcolor+\'; visibility:visible\">\';");
document.writeln("txt+=\'<div style=\"width:\'+width+\'px; height:16px; background-color:\'+barcolor+\'; padding:0px; border:1px\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"\'+(IE5? width-4 : width)+\'\"><tr><td width=\"\'+(width-20)+\'\"><div id=\"\'+id+\'_h\" style=\"width:\'+(width-20)+\'px; height:14px; font: bold 12px sans-serif; color:\'+textcolor+\'\"> \'+title+\'<\/div><\/td><td align=\"right\"><a onmousedown=\"document.getElementById(\\\'\'+id+\'_s\\\').style.display=\\\'none\\\'; document.getElementById(\\\'\'+id+\'_b\\\').style.display=\\\'none\\\';return false\"><img src=\"close.gif\" border=\"0\" height=\"15\" width=\"15\"><\/a><\/td><\/tr><\/table><\/div>\';");
document.writeln("txt+=\'<div id=\"\'+id+\'_ov\" width:\'+width+\'px; style=\"margin:2px; color:\'+textcolor+\'; font:\'+textptsize+\'pt \'+textfamily+\';\">\'+text+\'<\/div><\/div>\';");
document.writeln("document.write(txt);");
document.writeln("this.IDh=document.getElementById(id+\'_h\');");
document.writeln("this.IDh.IDb=document.getElementById(id+\'_b\');");
document.writeln("this.IDh.IDs=document.getElementById(id+\'_s\');");
document.writeln("this.IDh.IDb.subs=this.IDh.IDs;");
document.writeln("this.IDh.IDb.subb=this.IDh.IDb;");
document.writeln("this.IDh.IDb.IDov=document.getElementById(id+\'_ov\');");
document.writeln("if(IE5){");
document.writeln("this.IDh.IDb.IDov.style.width=width-6;");
document.writeln("this.IDh.IDb.IDov.style.height=height-22;");
document.writeln("this.IDh.IDb.IDov.style.scrollbarBaseColor=boxcolor;");
document.writeln("this.IDh.IDb.IDov.style.overflow=\"auto\";");
document.writeln("}else{");
document.writeln("this.IDh.IDs.style.MozOpacity=.5;");
document.writeln("}");
document.writeln("this.IDh.IDb.onmousedown=incrzindex;");
document.writeln("if(isdraggable){");
document.writeln("this.IDh.onmousedown=grab_id;");
document.writeln("this.IDh.onmouseup=stopdrag;");
document.writeln("}}}");
document.writeln("");
document.writeln("if(W3C)document.onmousemove=trackmouse;");
document.writeln("if(!IE5 && W3C)window.onload=NS6bugfix;");
document.writeln("createPopup( \'box3\', \'金汉城移动公告栏\' , 288, 90, 28, 200, true, \'FFFF00\' , \'FF0000\' , \'0080FF\' , \'欢迎大家来到金汉城论坛,本论坛正在建设中。。很多JS特效代码正在测试阶段。。以后会陆续公布。。。。汉城管理员:小猪\' , \'000000\' , 9 , \'宋体\');");
document.writeln("<\/script>");
document.writeln("<\/body>");
document.writeln("<\/html>");


2保存代码为JS格式文件

3上传JS代码到个人空间并获取JS文件地址

4将JS文件地址嵌入下面代码中
<script src=你的JS文件地址></script>

5复制代码到:
板块管理——板块简介中

6提交OK
[ 此贴被lixiang在2007-04-27 18:09重新编辑 ]
Posted: 2007-04-27 17:56 | [楼 主]
lbdl
特殊贡献奖 在线王勋章
级别: 总版主


精华: 7
发帖: 973
威望: 1011 点
金钱: 7870 RMB
贡献值: 100 点
注册时间:2006-06-29
最后登录:2008-07-29

 

非常好! 只要对js了解可以达到很多种效果.但是不宜使用过多.
我的论坛
Posted: 2007-04-27 19:34 | 1 楼
668
级别: 新手上路


精华: 0
发帖: 7
威望: 8 点
金钱: 70 RMB
贡献值: 0 点
注册时间:2007-04-28
最后登录:2007-05-04

 

新人不了解JS,可以发个明白贴出来了解吗????
Posted: 2007-05-04 02:29 | 2 楼
kwant
优秀会员勋章
级别: 侠客


精华: 0
发帖: 238
威望: 257 点
金钱: 0 RMB
贡献值: 58 点
注册时间:2006-10-04
最后登录:2008-08-10

 

这个不错,对5.3一样吗?你的连接没有用了
感谢千百度工作室为战火帝国军事做的支持!

【第一期】墓地战歌
Posted: 2007-07-20 15:23 | 3 楼
qzoo
QZ创作室
级别: 新手上路


精华: 0
发帖: 10
威望: 14 点
金钱: 91 RMB
贡献值: 0 点
注册时间:2007-11-02
最后登录:2008-05-19

 

只能确定一点,你的论坛被封了……
Posted: 2008-01-13 09:24 | 4 楼
78596559
级别: 新手上路


精华: 0
发帖: 4
威望: 5 点
金钱: 40 RMB
贡献值: 0 点
注册时间:2006-07-17
最后登录:2008-04-18

 

~士大夫但是
Posted: 2008-04-18 19:24 | 5 楼
帖子浏览记录 版块浏览记录
千百度工作室 » 论坛风格 Style