今天是：
 
现在位置：首页->文章频道->技术资料
网页常用特效代码大集合
时间：2007-11-29 10:09:05 来源：弈飞网络 作者：undefined 编辑：admin 【关闭】浏览： 次

滚动条
CODE:
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>

无边框窗口代码
制作无边框页面的代码
[Copy to clipboard]
CODE:
//第一步:把如下代码加入<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〉

让新窗口总在一个窗口弹出
新开一个的窗口（name=screen）
再在这个窗口内打开链接（target=screen）

网页内容顶格
[Copy to clipboard]
CODE:
<BODY leftMargin=0 topMargin=0 marginwidth="0" marginheight="0" >


横向不间断滚动广告

 

[Copy to clipboard]
CODE:
<script language="JavaScript">
imgArr=new Array()
imgArr[0]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/l/lisababy6617.gif border=0></a>"
imgArr[1]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/t/testool4434.gif border=0></a>"
imgArr[2]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/s/sxyuda6549.gif border=0></a>"
imgArr[3]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/q/qeji4041.gif border=0></a>"
imgArr[4]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/i/ieasytraining3984.gif border=0></a>"
imgArr[5]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/t/trainings1442.gif border=0></a>"
imgArr[6]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/r/renhebj002indexasp2486.gif border=0></a>"
imgArr[7]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/e/efeedlink6085.gif border=0></a>"
imgArr[8]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/k/kaixingou5811.gif border=0></a>"
imgArr[9]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/h/9happyindex8htm5912.gif border=0></a>"
imgArr[10]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/c/chinaroom6034.gif border=0></a>"
var moveStep=4        //步长，单位：pixel
var moveRelax=100    //移动时间间隔，单位：ms

ns4=(document.layers)?true:false

var displayImgAmount=4    //视区窗口可显示个数
var divWidth=125    //每块图片占位宽
var divHeight=60    //每块图片占位高

var startDnum=0
var nextDnum=startDnum+displayImgAmount
var timeID
var outHover=false

var startDivClipLeft
var nextDivClipRight

function initDivPlace(){
    if (ns4){
        for (i=0;i<displayImgAmount;i++){
            eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)
        }
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount)
        }
    }else{
        for (i=0;i<displayImgAmount;i++){
            eval("document.all.divAds"+i+".style.left="+divWidth*i)
        }
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount)
        }
    }
}

function mvStart(){
    timeID=setTimeout(moveLeftDiv,moveRelax)
}

function mvStop(){
    clearTimeout(timeID)
}

function moveLeftDiv(){
    if (ns4){
        for (i=0;i<=displayImgAmount;i++){
            eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep")
        }

        startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left"))
        nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right"))

        if (startDivClipLeft+moveStep>divWidth){
            eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth)
           
            eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount)
            eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)
            eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")
           
           
            startDnum=(++startDnum)%imgArr.length
            nextDnum=(startDnum+displayImgAmount)%imgArr.length
           
            startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
            nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
        }else{
            eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")
            startDivClipLeft+=moveStep
            nextDivClipRight+=moveStep
        }
        eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft)
        eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight)
    }else{
        for (i=0;i<=displayImgAmount;i++){
            eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")
        }
   
        startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft"))
        nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight"))
   
        if (startDivClipLeft+moveStep>divWidth){
            eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'")
           
            eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount)
            eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth)
           
            startDnum=(++startDnum)%imgArr.length
            nextDnum=(startDnum+displayImgAmount)%imgArr.length
           
            startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
            nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
        }else{
            startDivClipLeft+=moveStep
            nextDivClipRight+=moveStep
        }
        eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'")
        eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'")
    }

    if (outHover){
        mvStop()
    }else{
        mvStart()
    }
   
   
}

function writeDivs(){
    if (ns4){
        document.write("<ilayer name=divOuter width=750 height="+divHeight+">")
       
        for (i=0;i<imgArr.length;i++){
            document.write("<layer name=divAds"+i+">")
            document.write(imgArr[i]+" ")
            document.write("</layer>")
        }
        document.write("</ilayer>")
        document.close()
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.divOuter.document.divAds"+i+".clip.right=0")
        }
    }else{
        document.write("<div id=divOuter style='position:relative' width=750 height="+divHeight+">")
       
        for (i=0;i<imgArr.length;i++){
            document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>")
            document.write(imgArr[i]+" ")
            document.write("</div>")
        }
        document.write("</div>")
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'")
        }
    }
}
</script>
<BODY onload=javascript:mvStart()>
<SCRIPT language=JavaScript>writeDivs();initDivPlace();</SCRIPT>

 


点击图片弹出无边自定义窗口

[Copy to clipboard]
CODE:
<a href="#"><img src="image/tx.gif" alt="更换头像" width="16" height="16" hspace=10 border=0  onClick="MM_openBrWindow('tx.htm','tx','status=yes,scrollbars=yes,width=280,height=45')"></a>


无边框对话框窗口可以在myie中弹出

 

[Copy to clipboard]
CODE:
<script Language="JavaScript">
function 页面名称(WINwidth, WINheight) {
        showx = event.screenX - event.offsetX - 4 - WINwidth ; // + deltaX;
        showy = event.screenY - event.offsetY + 18; // + deltaY;

        newWINwidth = WINwidth + 4 + 18;
        var features =
                'dialogWidth:'  + newWINwidth  + 'px;' +
                'dialogHeight:' + WINheight + 'px;' +
                'dialogLeft:'   + showx     + 'px;' +
                'dialogTop:'    + showy     + 'px;' +
                'directories:no; localtion:no; menubar:no; status=no; toolbar=no;scrollbars:no;Resizeable=no';

        var endtarget = "弹出页面.htm";

//        window.open(endtarget, '', '');
        window.showModalDialog(endtarget, " ", features);
}
</script>


[Copy to clipboard]
CODE:
<input name="image" type=image onClick="页面名称(230, 35);return false;" src="代替按扭的图片.gif" alt="鼠标经过显示的文字" width="16" height="16" >


Java代码容错

 

[Copy to clipboard]
CODE:
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide

function killErrors() {
return true;
}

window.onerror = killErrors;

// -->
</SCRIPT>


flash透明

 

[Copy to clipboard]
CODE:
<PARAM NAME="wmode" VALUE="transparent">


状态栏 +在body中就ok

 

QUOTE:
Originally posted by justray at 2004-3-23 09:14 AM:
有状态栏的特效吗？？

<script language="JavaScript">
   var MESSAGE  =   "  欢迎来到落伍者论坛谢谢!    "
   var POSITION = 150
   var DELAY    = 10
   var scroll = new statusMessageObject()
function statusMessageObject(p,d) {
  this.msg = MESSAGE
  this.out = " "
  this.pos = POSITION
  this.delay = DELAY
  this.i     = 0
  this.reset = clearMessage}
function clearMessage() {
  this.pos = POSITION}
function scroller() {
  for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) {
    scroll.out += " "}
  if (scroll.pos >= 0)
   scroll.out += scroll.msg
  else scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
  window.status = scroll.out
  scroll.out = " "
  scroll.pos--
  if (scroll.pos < -(scroll.msg.length)) {
   scroll.reset()}
  setTimeout ('scroller()',scroll.delay)}
function snapIn(jumpSpaces,position) {
  var msg = scroll.msg
  var out = ""
  for (var i=0; i<position; i++)
    {out += msg.charAt(i)}
  for (i=1;i<jumpSpaces;i++)
    {out += " "}
  out += msg.charAt(position)
  window.status = out
  if (jumpSpaces <= 1) {
    position++
    if (msg.charAt(position) == ' ')
      {position++ }
    jumpSpaces = 100-position
  } else if (jumpSpaces >  3)
       {jumpSpaces *= .75}
  else
    {jumpSpaces--}
  if (position != msg.length) {
    var cmd = "snapIn(" + jumpSpaces + "," + position + ")";
    scrollID = window.setTimeout(cmd,scroll.delay);
  } else {    window.status=""
    jumpSpaces=0
    position=0
    cmd = "snapIn(" + jumpSpaces + "," + position + ")";
    scrollID = window.setTimeout(cmd,scroll.delay);
    return false }
  return true}
snapIn(100,0);
</script>

 

同页面的超级连接不同颜色

 

[Copy to clipboard]
CODE:
<html>
<head>
<style>
a.a1:link {
    font-size: 9pt;
    color: #000000;
    text-decoration: none;
}
a.a1:visited {
    font-size: 9pt;
    color: #999999;
    text-decoration: none;
}
a.a1:hover {
    font-size: 9pt;
    color: #FF6600;
    position: relative;
    top: 1px;

}
a.a1:active {
    font-size: 9pt;
    color: #333333;
    text-decoration: none;
}
a.a2:link {
    font-size: 9pt;
    color: #00ff00;
    }
a.a2:hover {
    font-size: 10pt;
    color: #FF3300;
    position: relative;
    top: 5px;

}
a.a2:active {
    font-size: 9pt;
    color: #fffff;
    text-decoration: none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<center>
<br>
<br>
<br>
<br>
<a href="" class="a1">123456</a>
<a href="" class="a2">000000</a>
</center>
</body>
</html>

 


1.页面自动刷新：把如下代码加入<head>区域中
[Copy to clipboard]
CODE:
  <meta http-equiv="refresh" content="20">

其中20指每隔20秒刷新一次页面。

2.页面自动跳转：把如下代码加入<head>区域中
[Copy to clipboard]
CODE:
  <meta http-equiv="refresh" content="20;url=http://kingsnet.126.com">

推荐精彩图片
信息评论
您要为您所发的言论的后果负责，故请各位遵纪守法并注意语言文明。
 查看评论
匿名
验证码：
标　题：
 *
留　言：
 *
新闻搜索
标题：
相关文章
招商信息
弈飞网站内容管理系统！VSFLYCMSV1.0 AC2 正式版
VsFly.Com All Rights Reserved 版权所有
未经授权禁止用于商业行为