繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 论坛特效代码收集（落伍转发-不错）
- Javascript
- javascript实现的动态添加表单元素input,button等(appendChild)
- javascript动态添加单元格的脚本代码
- [原创]仿google adsense颜色选择器代码，从中易广告联盟程序提取
- asp javascript 实现关闭窗口时保存数据的办法
- javascript 下拉框显示当前日期
- 惊云JS随机排序程序随机显示信息-每次新闻显示顺序都不一样
- javascript下有关dom以及xml节点访问兼容问题
- js 复制功能 支持 for IE/FireFox/mozilla/ns
- css图片自适应大小
- 比较简单的一个符合web标准的JS调用flash方法
- javascript数组组合成字符串的脚本
- XRegExp 0.2: Now With Named Capture
- jQuery 研究心得 取得属性的值
- 防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
- Prototype1.6 JS 官方下载地址
- jquery 指南/入门基础
- jquery api参考 visualjquery 中国线路 速度快
- js控制fieldset高度的代码
- document.documentElement && document.documentElement.scrollTop
- js同时按下两个方向键
Javascript 中的 论坛特效代码收集（落伍转发-不错）
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 390 ::
收藏到网摘: n/a
1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。
2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色）
scrollbar-arrow-color上下按钮上三角箭头的颜色
scrollbar-base-color滚动条的基本颜色
scrollbar-dark-shadow-color立体滚动条强阴影的颜色
scrollbar-face-color立体滚动条凸出部分的颜色
scrollbar-highlight-color滚动条空白部分的颜色
scrollbar-shadow-color立体滚动条阴影的颜色
我们通过几个实例来讲解上述的样式属性：
1.让浏览器窗口永远都不出现滚动条
没有水平滚动条
<body style="overflow-x:hidden">
没有垂直滚动条
<body style="overflow-y:hidden">
没有滚动条
<body style="overflow-x:hidden;overflow-y:hidden">或<body
style="overflow:hidden">
2.设定多行文本框的滚动条
没有水平滚动条
<textarea style="overflow-x:hidden"></textarea>
没有垂直滚动条
<textarea style="overflow-y:hidden"></textarea>
没有滚动条
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
或<textarea style="overflow:hidden"></textarea>
3.设定窗口滚动条的颜色
设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">
scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
加上一点特别的效果：
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">
4.在样式表文件中定义好一个类，调用样式表。
<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>
这样调用：
<textarea class="coolscrollbar"></textarea>
无边框窗口代码
//第一步:把如下代码加入<head></head>区域中
<script language=javascript>
minimizebar="minimize.gif"; //视窗右上角最小化「按钮」的图片
minimizebar2="minimize2.gif"; //滑鼠悬停时最小化「按钮」的图片
closebar="close.gif"; //视窗右上角关闭「按钮」的图片
closebar2="close2.gif"; //滑鼠悬停时关闭「按钮」的图片
icon="icon.gif"; //视窗左上角的小图标
function noBorderWin(fileName,w,h,titleBg,moveBg,titleColor,titleWord,scr) //定义一个弹出无边视窗的函数，能数意义见下面「参数说明」，实际使用见最後的实例。
/*
------------------参数说明-------------------
fileName ：无边视窗中显示的文件。
w ：视窗的宽度。
h ：视窗的高度。
titleBg ：视窗「标题栏」的背景色以及视窗边框颜色。
moveBg ：视窗拖动时「标题栏」的背景色以及视窗边框颜色。
titleColor ：视窗「标题栏」文字的颜色。
titleWord ：视窗「标题栏」的文字。
scr ：是否出现卷轴。取值yes/no或者1/0。
--------------------------------------------
*/
{
var contents="<html>"+
"<head>"+
"<title>"+titleWord+"</title>"+
"<META http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\">"+
"<object id=hhctrl type='application/x-oleobject' classid='clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11'><param name='Command' value='minimize'></object>"+
"</head>"+
"<body topmargin=0 leftmargin=0 scroll=no onselectstart='return false' ondragstart='return false'>"+
" <table height=100% width=100% cellpadding=0 cellspacing=1 bgcolor="+titleBg+" id=mainTab>"+
" <tr height=18 style=cursor:default; onmousedown='x=event.x;y=event.y;setCapture();mainTab.bgColor=\""+moveBg+"\";' onmouseup='releaseCapture();mainTab.bgColor=\""+titleBg+"\";' onmousemove='if(event.button==1)self.moveTo(screenLeft+event.x-x,screenTop+event.y-y);'>"+
" <td width=18 align=center><img height=12 width=12 border=0 src="+icon+"></td>"+
" <td width="+w+"><span style=font-size:12px;color:"+titleColor+";font-family:宋体;position:relative;top:1px;>"+titleWord+"</span></td>"+
" <td width=14><img border=0 width=12 height=12 alt=最小化 src="+minimizebar+" onmousedown=hhctrl.Click(); onmouseover=this.src='"+minimizebar2+"' onmouseout=this.src='"+minimizebar+"'></td>"+
" <td width=13><img border=0 width=12 height=12 alt=关闭 src="+closebar+" onmousedown=self.close(); onmouseover=this.src='"+closebar2+"' onmouseout=this.src='"+closebar+"'></td>"+
" </tr>"+
" <tr height=*>"+
" <td colspan=4>"+
" <iframe name=nbw_v6_iframe src="+fileName+" scrolling="+scr+" width=100% height=100% frameborder=0></iframe>"+
" </td>"+
" </tr>"+
" </table>"+
"</body>"+
"</html>";
pop=window.open("","_blank","fullscreen=yes");
pop.resizeTo(w,h);
pop.moveTo((screen.width-w)/2,(screen.height-h)/2);
pop.document.writeln(contents);
if(pop.document.body.clientWidth!=w||pop.document.body.clientHeight!=h) //如果无边视窗不是出现在纯粹的IE视窗中
{
temp=window.open("","nbw_v6");
temp.close();
window.showModalDialog("about:<"+"script language=javascript>window.open('','nbw_v6','fullscreen=yes');window.close();"+"</"+"script>","","dialogWidth:0px;dialogHeight:0px");
pop2=window.open("","nbw_v6");
pop2.resizeTo(w,h);
pop2.moveTo((screen.width-w)/2,(screen.height-h)/2);
pop2.document.writeln(contents);
pop.close();
}
}
</script>
//第二步:把如下代码加入<body></body>区域中
<a href=#none onclick=noBorderWin('rate.htm','400','240','#000000','#333333','#CCCCCC','一个无边视窗的测试例子','yes');>open〈/a〉
评论 (0) All
