Skip navigation.

Posts tagged with "web study"

BLOG中特殊文字的代码

Saturday, 19. August 2006, 15:24:34

1、光晕字代码： 
<DIV style="FILTER: glow(color=#ff6600,strength=6); COLOR: #000000; HEIGHT: 10px"><FONT size=5>在这里输入文字</FONT></DIV>
LQ'S BLOG
2、左右滚动字代码 
<marquee border="0" align="middle" scrolldelay="120">在这里输入文字</marquee>
3、上下滚动的字代码 
<MARQUEE scrollAmount=2 scrollDelay=200 direction=up width="100%"
height=210><FONT style="LINE-HEIGHT: 180%; LETTER-SPACING: 3px"
color=#ffffff>在这里输入文字</FONT></MARQUEE>
4、模糊字代码： 
<FONT color=#FF0033 style="FILTER: blur(add=1, direction=40,strength=10); FONT-SIZE: 30px; FONT-WEIGHT: bolder; WIDTH: 200px">在这里输入文字</FONT>
LQ'S BLOG 5、文字走马灯效果代码 <marquee width="157" height="21">这里输入文字 6、改变文字的字体和颜色代码 华文行楷： 
<b><font face=华文行楷 size=5 color=#ff0000>在这里输入文字</FONT>
LQ'S BLOG 楷体： 
<FONT face=楷体_GB2312 color=#0000ff size=1>在这里输入文字</FONT>
注意：变换字体颜色只需替换color = 后面的代码,好看的字体颜色有： #ff1493 #228b22 #4169e1 #9400d3 #ff0000 #daa520 7、文字停停走走效果代码 
<marquee scrolldelay=500 scrollamount=100>在这里输入文字</marquee>
8、浮雕的文字代码 
</textarea><table style="FILTER: dropshadow(color=#6699FF, offx=1, offy=1, positive=1)；"><font color=#ffffff>在这里输入文字</font></table>
其中color是阴影的颜色，可以配合网页色调改变，positive是设置阴影的强度，offx
和offy是设置的阴影和文字的距离，font color是原字体的颜色。
9、阴影的文字代码 </textarea>在这里输入文字
10、倒帖的文字特效代码 
<p> align=right><FONT >style="FONT-SIZE:50pt;filter:FlipH(color=silver);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>在这里输入文字</B></FONT></p>
11、翻转文字特效代码
<FONT style="FONT-SIZE:50pt;filter:FlipV(color=silver);WIDTH:100%;
COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>在这里输入文字</B></FONT>
12、漂动文字特效代码 
<table align=center border=3 bordercolor="#CD5C5C" width=450 height=350><td background=http://bbs.yunbbs.com/uploadFile/2004-12/20041210163350528.jpg><marquee behavior=alternate scrollamount=3 direction=down height=350><marquee behavior=alternate scrollamount=3 width=500><img src=1.gif><font color=red size=6><b>在这里输入文字</b><img src=1.gif></font></marquee></table><br>
13、不停变化颜色的字代码 
<DIV id=texture style="WIDTH: 460px; HEIGHT:30px"><IMG height=2
src="/web/ewebeditor/UploadFile/2005101692624157.gif" width=460px
align=right><IMG height=30px src="/web/ewebeditor/UploadFile/2005101692625359.gif" width=446.2px
align=right><DIV style="FONT-SIZE: 20px; FILTER: Chroma(color=#FCFBFA); FLOAT: left; WIDTH: 460px; HEIGHT:30px; BACKGROUND-COLOR:#000000" align=center><FONT color=#FCFBFA>在这里输入文字</FONT></DIV></DIV>
14.发光效果： 
<FONT style="COLOR: #FF0033; FILTER: glow(color=blue); FONT-FAMILY: 宋体; FONT-SIZE: 30pt; WIDTH: 100%">在这里输入文字</FONT>
15.模糊效果： 
<FONT color=#FF0033 style="FILTER: blur(add=1, direction=40,strength=10); FONT-SIZE: 30px; FONT-WEIGHT: bolder; WIDTH: 200px">在这里输入文字</FONT>

1 comment

3D文字特效

Saturday, 12. August 2006, 06:15:32

<style type="text/css">
<!--
.sample {
  font-style: italic; font-family: arial black;font-size: 40px; font-weight: bold; cursor: hand;
}
-->
</style>
<title>Css不朽的经典—3D文字特效</title>
<div> 
<h2>3D Text</h2>
 <p>以下是一个用了blur滤镜而另一个没用的叠加效果</p>
 <p onClick="alert(this.innerHTML)"> <span class="sample"
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);"
>LQ's Blog</span><span class="sample"
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> 
 LQ's Blog</span> </p>
 <h2>Glass Text</h2>
 <p>这个是两个都用了alpha滤镜的效果</p>
 <p onClick="alert(this.innerHTML)"> <span class="sample"
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);"
>LQ's Blog</span><span class="sample"
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);"
>LQ's Blog</span> </p>
 <h2>Inner Shadow</h2>
 <p>这个是先用了一段白色的文字，再加了mask()滤镜，再用了shadow()滤镜，最后加入chroma()滤镜形成后一段字体，放在前一段文字的相对left: 
 -200px位置上形成的。</p>
 <p onClick="alert(this.innerHTML)"> <span class="sample"
style="width: 200px; height: 70; color: white;"
>LQ's Blog</span><span class="sample"
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);"
>LQ's Blog</span> </p>
 <h2>Outline Text</h2>
 <p>用mask, glow and chroma三个滤镜联合作用</p>
 <p onClick="alert(this.innerHTML)"> <span class="sample" style="width: 200px; height: 70; filter: mask(color=red) glow(color=black, strength=1) chroma(color=red);">LQ's Blog</span> </p>
<h2>与Marquee的完美结合</h2>
<p onClick="alert(this.innerHTML)"> <span class="sample"
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);"
><marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample">LQ's Blog</marquee></span>
<span class="sample"
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"> 
<marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample">LQ's Blog</marquee></span> </p>
</div>

在线演示
信息来源:evil blog

No comments

用户输入密码的强度

Friday, 11. August 2006, 18:02:13

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<script language=javascript>

//程序设计:环球万维,专业提供虚拟主机,域名注册服务
//网址:<a href="http://www.netInter.cn" target="_blank">http://www.netInter.cn</a>
//本程序是环球万维原创程序,若需转载,请注明网址及出处,谢谢.
//以上信息与文章正文是不可分割的一部分,所以如果您要转载本文章,您必须保留以上信息.


//CharMode函数
//测试某个字符是属于哪一类.
function CharMode(iN){
if (iN>=48 && iN <=57) //数字
return 1; 
if (iN>=65 && iN <=90) //大写字母
return 2;
if (iN>=97 && iN <=122) //小写
return 4;
else
return 8; //特殊字符
}

//bitTotal函数
//计算出当前密码当中一共有多少种模式
function bitTotal(num){
modes=0;
for (i=0;i<4;i++){
if (num & 1) modes++;
num>>>=1;
}
return modes;
}

//checkStrong函数
//返回密码的强度级别

function checkStrong(sPW){
if (sPW.length<=4)
return 0; //密码太短
Modes=0;
for (i=0;i<sPW.length;i++){
  //测试每一个字符的类别并统计一共有多少种模式.
Modes|=CharMode(sPW.charCodeAt(i));
}

return bitTotal(Modes);

} 

//pwStrength函数
//当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色

function pwStrength(pwd){
O_color="#eeeeee";
L_color="#FF0000";
M_color="#FF9900";
H_color="#33CC00";
if (pwd==null||pwd==''){
Lcolor=Mcolor=Hcolor=O_color;
} 
else{
S_level=checkStrong(pwd);
switch(S_level) {
  case 0:
  Lcolor=Mcolor=Hcolor=O_color;   
  case 1:
  Lcolor=L_color;
  Mcolor=Hcolor=O_color;
  break;
  case 2:
  Lcolor=Mcolor=M_color;
  Hcolor=O_color;
  break;
  default:
  Lcolor=Mcolor=Hcolor=H_color;
  }
} 

document.getElementById("strength_L").style.background=Lcolor;
document.getElementById("strength_M").style.background=Mcolor;
document.getElementById("strength_H").style.background=Hcolor;
return;
}

</script>

<BODY>
<form name=form1 action="" >
输入密码:<input type=password size=10 onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value)>
<br>密码强度:
<table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" height="23" style='display:inline'>
  <tr align="center" bgcolor="#eeeeee"> 
  
  <td width="33%" id="strength_L">弱</td>
  
  <td width="33%" id="strength_M">中</td>
  
  <td width="33%" id="strength_H">强</td>
  </tr>
</table>

</form>

</BODY>
</HTML>


在线演示

3 comments

颜色渐变效果

Friday, 11. August 2006, 17:43:14

<HTML>
<HEAD>
<TITLE>javascriptboy</TITLE>
<SCRIPT language=JavaScript> 
// Flash table Extension for Dreamwever ,by dio(diopex@sina.com)
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){ //do this so I can take a string too
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}
clearTimeout(nereidFadeTimers[object.sourceIndex]);
diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}

</SCRIPT>
</HEAD>
<BODY text=#000000 bgColor=#e3e3e3>

<TABLE borderColor=#ffffff height=100 cellSpacing=1 cellPadding=1 width=100 align=center bgColor=#000033 border=1>
<TR align=middle>
<TD onmouseover=nereidFade(this,100,10,5) style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5) bgColor=#00ccff>
<FONT face=verdana color=#ffffff size=1>dio</FONT>
</TD>
<TD onmouseover=nereidFade(this,100,10,5) style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5) bgColor=#ff9900>
<FONT face=verdana color=#ffffff size=1>pex</FONT>
</TD>
</TR>
<TR align=middle>
<TD onmouseover=nereidFade(this,100,10,5) style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5) bgColor=#ff3399>
<FONT face=verdana color=#ffffff size=1>pex</FONT>
</TD>
<TD onmouseover=nereidFade(this,100,10,5) style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5) bgColor=#33ff66>
<FONT face=verdana color=#ffffff size=1>dio</FONT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


在线演示

No comments

Loading代码的实现

Monday, 31. July 2006, 16:20:17

第一步：在<head></head>里添加如下代码

<style type="text/css">
#loader_container {
text-align:center;
position:absolute;
top:40%;
width:100%;
left: 0;
}

#loader {
font-family:Tahoma, Helvetica, sans;
font-size:11.5px;
color:#000000;
background-color:#FFFFFF;
padding:10px 0 16px 0;
margin:0 auto; 
display:block;
width:130px;
border:1px solid #5a667b;
text-align:left; 
z-index:2;
}
#loader_bg {background-color:#e4e7eb;
position:relative;
top:8px;
left:8px;
height:7px;
width:113px;
font-size:1px}
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:0px;
background-color:#70940D
}
</style><script language="JavaScript">
//读取框
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate()
{
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>79) pos += dir;
if (pos>79) len -= dir;
if (pos>79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
}

</script>


第二步：修改<body>为<body onLoad="remove_loading();">


第三步：在<body>下面添加以下代码

<div id="loader_container">
<div id="loader">
<div align="center">页面正在加载中 ...</div>
<div id="loader_bg"><div id="progress"> </div></div>
</div>
</div>


信息来源:finalsky.com.cn

No comments

1 2 3 Next »

Showing posts 1 - 5 of 12.

Photos

opr00TFH.jpgopr00TDY.jpgopr00TEV.jpgopr00TEW.jpgopr00TDV.jpgopr00TET.jpgopr00TE3.jpgopr00TFI.jpgopr00TFF.jpgopr00TFG.jpg
January 2010
S M T W T F S
December 2009February 2010
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

Bloger

Commend

  • OFWC

    Opera Friends Wall Creator