今天梦与天堂发布了加强文字编辑的JS系列代码,抱着学习的态度转载过来,因为比较多,所以我只转载最关键的HTML代码、JS代码以及必要的代码说明。对JS和HTML都比较熟悉的朋友可以直接拷贝使用,不太熟悉想学习的朋友请到梦与天堂,那里有图文并茂的详细教程等着你,看原文请点这里。另外,我转载的时候对JS代码有了一点增减(把alert()函数去掉了,希望梦与天堂不要骂我-_-#)。好了,下面是代码和说明:
注意:因为排版的问题第6、8、9个JS代码的最后一行和倒数第二行之间用了个回车,所以拷贝的以后如果不能直接用,请自行把空格去掉。
1.设置字体大小的代码
HTML代码: <FONT style="FONT-SIZE: 800%">超大</FONT>
JS代码:
javascript:document.all("rtebox").getElementsByTagName("div")[2].focus();var a=document.selection.createRange();var c=window.prompt("Enter the FONT-SIZE","100%");if (c!=null){void(a.pasteHTML("<FONT style='FONT-SIZE:"+c+"'>"+a.htmlText+"</FONT>"));}
说明:1) 使用前必須清除字型大小之後,使用Tool才看的到效果。
2) 鼠标选中欲改变大小的文字,然后使用Tool才看得到效果。
2. 上下标文字
HTML代码: <SUP>我是上標</SUP> <SUB>我是下標</SUB>
JS代码:
javascript:document.all("rtebox").getElementsByTagName("div");void(document.selection.createRange().execCommand("superscript", false));
说明:1).反白所欲改變文字,使用Tool即見到效果。
2).如欲清除上下標文字再使用一次即馬上恢復。
3. 去除文字样式
javascript:document.all("rtebox").getElementsByTagName("div")[2].focus();void(document.selection.createRange().execCommand("RemoveFormat"));
说明:反白所欲恢復文字,使用Tool文字樣式及恢復内定值
4. 发光文字
HTML代码:
<SPAN style="FILTER: glow(color=#FF0000,strength=10);
HEIGHT: 8px">效果看這裡</SPAN>
JS代码:
javascript:document.all("rtebox").getElementsByTagName("div")[2].focus();var a=document.selection.createRange();var b=window.prompt("Color or #Hex value","#880000");if (b!=null){var c=window.prompt("Glow effect:1~255","2");if (c!=null){void(a.pasteHTML("<SPAN style='FILTER:glow(color="+b+",strength="+c+");HEIGHT:1px;'>"+a.htmlText+"</SPAN>"));}}
说明:反白所欲改變文字,使用Tool依序填入1).發光顏色,2).發光強度。
5. 投射阴影文字
HTML代码:
<SPAN style="FILTER: Shadow(color=#FF0000,direction=135);
HEIGHT: 1px">投射陰影效果</SPAN>
JS代码:
javascript:document.all("rtebox").getElementsByTagName("div")[2].focus();var a=document.selection.createRange();var b=window.prompt("Color or #Hex value","#880000");if (b!=null){var c=window.prompt("Directional offset of the shadow:0,or 45 times≦315","135");if (c!=null){void(a.pasteHTML("<SPAN style='FILTER:Shadow(color="+b+",direction="+c+");HEIGHT:8px;'>"+a.htmlText+"</SPAN>"));}}
说明:反白所欲改變文字,使用Tool依序填入1).投影顏色,2).投影方向。
6. 阴影文字
HTML代码:
<SPAN style="FILTER: Dropshadow(color=#FF0000,offX=5,offY=5);
HEIGHT: 8px">陰影效果</SPAN>
JS代码:
javascript:document.all("rtebox").getElementsByTagName("div")[2].focus();var a=document.selection.createRange();var b=window.prompt("Color or #Hex value","#880000");if (b!=null){var c=window.prompt("Shadow←→","5");if (c!=null){var f=window.prompt("Shadow↑↓","5");if (f!=null){void(a.pasteHTML("<SPAN style='FILTER:Dropshadow(color="+b+",offX="+c+",offY="+f+");HEIGHT:8px'>"
+a.htmlText+"</SPAN>"));}}}
说明:反白所欲改變文字,使用Tool依序填入
1).陰影顏色,2).陰影水平位移,3).陰影垂直位移。
7. 模糊文字
HTML代码:
<SPAN style="FILTER: Dropshadow(color=#FF0000,offX=5,offY=5);
HEIGHT: 8px">陰影效果</SPAN>
JS代码:
javascript:document.all("rtebox").getElementsByTagName("div")[2].focus();var a=document.selection.createRange();var c=window.prompt("Direction of the blur:0,or 45 times≦315","135");if (c!=null){var d=window.prompt("Blur effect:>0","5");if (d!=null){void(a.pasteHTML("<SPAN style='FILTER:Blur(direction="+c+",strength="+d+");HEIGHT:8px'>"+a.htmlText+"</SPAN>"));}}
说明:反白所欲改變文字,使用Tool依序填入1).模糊方向,2).模糊影響強度。
8. 半透明文字
HTML代码:
<SPAN style="FILTER: Alpha(opacity=100,finishOpacity=0,style=1);
HEIGHT: 8px">AA</SPAN>
JS代码:
javascript:document.all("rtebox").getElementsByTagName("div")[2].focus();var a=document.selection.createRange();var b=window.prompt("Style=0:uniform 1:linear 2:radial 3:rectangular","0");if (b!=null){var c=window.prompt("opacity:0~100","0");if (c!=null){var f=window.prompt("finishOpacity:0~100","90");if (f!=null){void(a.pasteHTML("<SPAN style='FILTER:Alpha(opacity="+f+",finishOpacity="+c+",style="+b+");HEIGHT:8px'>"
+a.htmlText+"</SPAN>"));}}}
说明:反白所欲改變文字,使用Tool依序填入
1).濾鏡的樣式,2).起始透明度,3).結束透明度。
9. 波形文字
HTML代码:
<SPAN style="FILTER: Wave(freq=5,strength=9,lightstrength=9,phase=0);
HEIGHT: 1px">這是波形文字</SPAN>
JS代码:
javascript:document.all("rtebox").getElementsByTagName("div")[2].focus();var a=document.selection.createRange();var b=window.prompt("Freq.>0","5");if (b!=null){var c=window.prompt("strength>0","9");if (c!=null){var f=window.prompt("lightstrength≦100","9");if (f!=null){var g=window.prompt("phase<100","0");if (g!=null){void(a.pasteHTML("<SPAN style='FILTER:Wave(freq="+b+",strength="+c+",lightstrength="+f+",phase="+g+");HEIGHT:1px'>"
+a.htmlText+"</SPAN>"));}}}}
说明:反白所欲改變文字,使用Tool依序填入
1).波的頻率,2).波振幅強度,3).波峰的強度,4).波起始的相位。
10. 光罩文字
HTML代码:
<SPAN style="FILTER: Mask(color=#FF0000); HEIGHT: 8px">
MASK</SPAN>
JS代码:
javascript:document.all("rtebox").getElementsByTagName("div")[2].focus();var a=document.selection.createRange();var c=window.prompt("Colour of the transparent regions:color or #Hex value","#880000");if (c!=null){void(a.pasteHTML("<SPAN style='FILTER:Mask(color="+c+");HEIGHT:8px'>"+a.htmlText+"</SPAN>"));}
说明:反白所欲改變文字,使用Tool填入填入不透明顏色。
11. 除色滤镜
HTML代码:
<SPAN style="FILTER: Chroma(color=#FF0000); HEIGHT: 8px">Chroma</SPAN>
JS代码:
javascript:document.all("rtebox").getElementsByTagName("div")[2].focus();var a=document.selection.createRange();var c=window.prompt("Value of the color to be subject to chromakey transparency:color or #Hex value","#880000");if (c!=null){void(a.pasteHTML("<SPAN style='FILTER:Chroma(color="+c+");HEIGHT:8px'>"+a.htmlText+"</SPAN>"));}
说明:反白所欲改變文字,使用Tool填入填入去除顏色。