6个比较常用的文字特效代码分享

当前位置：首页 > 网页设计 > 6个比较常用的文字特效代码分享

Jan17th

diyidu 网页设计 38 人阅读了此文我来说两句！

文字特效显示运用得当，在网页设计中能起到积极的作用：如避免网页的单调性，改善用户体验等。因而，不少设计师看中了它，大做文章。但可惜的是，目前比较常用且实用的文字特效其实并不多，除了像“关键词高亮显示”等比较“强悍”以外，其他基本上是一些相对细节的玩意儿了，从功用的角度来说，或许花俏了点。但不论如何，应该还是有人喜欢的吧？我今天抽空整理出了6个，与大家分享下。

1.JS实现title及alt提示的个性化

<html> <head> <title>title及alt提示特效</title> <style type="text/css"> body{font-size:12px;color:#000000} td{font-size:12px;color:#000000} a:link{font-size:12px;color:#000000} </style> <script language="javascript"> var pltsPop=null; var pltsoffsetX = 12; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适 var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离；3-12 合适 var pltsTitle=""; document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>'); function pltsinits() { document.onmouseover = plts; document.onmousemove = moveToMouseLoc; } function plts() { var o=event.srcElement; if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""}; if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""}; pltsPop=o.dypop; if(pltsPop!=null && pltsPop!="" && typeof(pltsPop)!="undefined") { pltsTipLayer.style.left=-1000; pltsTipLayer.style.display=''; var Msg=pltsPop.replace(/\n/g,"<br>"); Msg=Msg.replace(/\0x13/g,"<br>"); var re=/\{(.[^\{]*)\}/ig; if(!re.test(Msg))pltsTitle="『低一度设计博客』"; else{ re=/\{(.[^\{]*)\}(.*)/ig; pltsTitle=Msg.replace(re,"$1")+" "; re=/\{(.[^\{]*)\}/ig; Msg=Msg.replace(re,""); Msg=Msg.replace("<br>","");} var content = '<table style="FILTER:alpha(opacity=90);border: 1px solid #cccccc" id="toolTipTalbe" cellspacing="1" cellpadding="0"><tr><td width="100%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0">'+ '<tr id="pltsPoptop"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="topleft" align="left">↖'+pltsTitle+'</p><p id="topright" align="right" style="display:none">'+pltsTitle+'↗</font></b></font></td></tr>'+ '<tr><td "+attr+" style="padding-left:10px;padding-right:10px;padding-top: 8px;padding-bottom:6px;line-height:140%">'+Msg+'</td></tr>'+ '<tr id="pltsPopbot" style="display:none"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="botleft" align="left">↙'+pltsTitle+'</p><p id="botright" align="right" style="display:none">'+pltsTitle+'↘</font></b></font></td></tr>'+ '</table></td></tr></table>'; pltsTipLayer.innerHTML=content; toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2); moveToMouseLoc(); return true; } else { pltsTipLayer.innerHTML=''; pltsTipLayer.style.display='none'; return true; } } function moveToMouseLoc() { if(pltsTipLayer.innerHTML=='')return true; var MouseX=event.x; var MouseY=event.y; var popHeight=pltsTipLayer.clientHeight; var popWidth=pltsTipLayer.clientWidth; if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight) { popTopAdjust=-popHeight-pltsoffsetY*1.5; pltsPoptop.style.display="none"; pltsPopbot.style.display=""; } else { popTopAdjust=0; pltsPoptop.style.display=""; pltsPopbot.style.display="none"; } if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth) { popLeftAdjust=-popWidth-pltsoffsetX*2; topleft.style.display="none"; botleft.style.display="none"; topright.style.display=""; botright.style.display=""; } else { popLeftAdjust=0; topleft.style.display=""; botleft.style.display=""; topright.style.display="none"; botright.style.display="none"; } pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust; pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust; return true; } pltsinits(); </script> </head> <body> 链接提示效果：<a href="http://www.diyidu.cn/" target="_blank" title="title及alt提示特效，整理修改：低一度{diyidu.cn}，Enjoy it。">title及alt提示特效分享，有问题请联系低一度，QQ：282360292。</a> </body> </html>
提示：您可以先修改部分代码再运行

2.JS实现带链接标题的打字效果

<html> <head> <title>JS实现带链接标题的打字效果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> body{font-size:14px;font-weight:bold;} </style> </head> <body> 公告：<a id="HotNews" href="" target="_blank"></a> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </body> </html> <p>出品人：<a href="http://www.diyidu.cn" target="_blank">低一度</a></p>
提示：您可以先修改部分代码再运行

3.JS控制字号“小、中、大”切换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css">  </style> <title>JS控制字号小中大切换 - 低一度</title> </head> <body> <script type="text/javascript"> function doZoom(size) { var zoom = document.all ? document.all['Zoom'] : document.getElementById('Zoom'); zoom.style.fontSize = size + 'px'; } </script> 字号选择:<a href="javascript:doZoom(12)">小</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(16)">大</a> <br /><br /> <div id="Zoom">低一度，是一个专注于网页设计、博客运营、免费资源、电脑网络等的原创IT评论博客。</div> <br /> <p>出品人：<a href="http://www.diyidu.cn" target="_blank">低一度</a></p> </body> </html>
提示：您可以先修改部分代码再运行

4.CSS实现超长字段用省略号代替

<table width="550" border="0" cellpadding="5" cellspacing="1" bgcolor="#007373" style="table-layout:fixed"> <tr> <th nowrap bgcolor="#159AA2" style="overflow:hidden; text-overflow:ellipsis; color:#FFFFFF;">List1</th> <th nowrap bgcolor="#159AA2" style="overflow:hidden; text-overflow:ellipsis; color:#FFFFFF;">List2</th> <th nowrap bgcolor="#159AA2" style="overflow:hidden; text-overflow:ellipsis; color:#FFFFFF;">List3</th> </tr> <tr> <td nowrap bgcolor="#E8FFFF" style="overflow:hidden; text-overflow:ellipsis;">用CSS实现超长字段被省略的简单方法</td> <td nowrap bgcolor="#E8FFFF" style="overflow:hidden; text-overflow:ellipsis;">用CSS实现超长字段被省略的简单方法</td> <td nowrap bgcolor="#E8FFFF" style="overflow:hidden; text-overflow:ellipsis;">用CSS实现超长字段被省略的简单方法</td> </tr> </table> <p>出品人：<a href="http://www.diyidu.cn" target="_blank">低一度</a></p>
提示：您可以先修改部分代码再运行

5.CSS实现定义超链接下划线为虚线

6.CSS实现文字凹陷效果

<div style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all; font-size:12px; line-height:18px; background-color:#eeeeee;"> <font disabled> 怎么样，我是不是真的凹下去了？<br> 呵呵，你不想试试看吗？<br> </font> </div> <p>出品人：<a href="http://www.diyidu.cn" target="_blank">低一度</a></p>
提示：您可以先修改部分代码再运行

注意：以上特效1、4、6不兼容火狐浏览器，低一度正在修改中。。。

本文出自：低一度，地址：http://www.diyidu.cn/post/font_texiao.html，转载须注明！

« 今日值得庆贺一下的6件事 “低一度独立博客导航系统”共享 »

或许你会感兴趣的文章：

to "6个比较常用的文字特效代码分享" 引用该日志！

#1 康帅博回复该留言 2010-1-17 14:05:01

过来帮桶哥顶顶。。
diyidu 于 2010-1-17 14:10:34 回复
感激不尽，呵呵。
#2 GPS地图回复该留言 2010-1-17 14:22:29

这个文章让我想起我以前的天天百事通博客，悲剧！
diyidu 于 2010-1-17 17:38:56 回复
你就继续怀旧吧，哈哈。
#3 loker 回复该留言 2010-1-17 16:55:58

很实用的东东啊，支持咯！想以后学着做主题。
diyidu 于 2010-1-17 17:39:23 回复
那要支持下，呵呵，加油。
#4 阿宝回复该留言 2010-1-17 19:39:04

博主辛苦啦。赞一下。
diyidu 于 2010-1-17 23:37:27 回复
呵。谢谢鼓励。
#5 虫儿回复该留言 2010-1-17 19:43:15

很好的资料。。。
diyidu 于 2010-1-17 23:38:14 回复
过奖了，有一些兼容问题解决不了，好郁闷。
#6 liuzm 回复该留言 2010-1-17 20:26:31

不错，正好项目要用到，哈哈，谢谢先。
diyidu 于 2010-1-17 23:38:50 回复
能帮得上忙，很荣幸啊！
#7 内大臣回复该留言 2010-1-17 21:58:21

opera下面好像运行得很好。
diyidu 于 2010-1-17 23:39:35 回复
opra就是个全能浏览器，呵呵。
#8 evlos 回复该留言 2010-1-17 22:37:53

哈哈，貌似“1.JS实现title及alt提示的个性化”这个比jq的悬浮框效果来得实惠~
diyidu 于 2010-1-17 23:40:03 回复
是吗？呵呵。
#9 阿福回复该留言 2010-1-17 23:25:29

报告个bug，代码6也不支持chrome。
diyidu 于 2010-1-17 23:40:41 回复
收到，谢谢长官。
#10 licream 回复该留言 2010-1-18 0:48:45

感谢分享。。
diyidu 于 2010-1-18 8:25:48 回复
不客气呵。问好。
#11 瑜际回复该留言 2010-1-18 1:27:58

路过，学习了，顺便说一句，你那个simpleG主题不错哦。
diyidu 于 2010-1-18 8:26:25 回复
是吗？谢谢鼓励哦。
#12 猴子回复该留言 2010-1-18 3:25:03

好东东，谢谢低一度的分享：）
diyidu 于 2010-1-18 8:27:19 回复
OK，欢迎常来。
#13 征途牛仔回复该留言 2010-1-18 10:00:44

初次造访请多关照！
diyidu 于 2010-1-18 11:06:32 回复
哈哈，相互关照啦。
#14 集趣回复该留言 2010-1-18 10:41:43

第一个的确用得比较多，第4个真的很实用。
diyidu 于 2010-1-18 11:07:58 回复
这几个还是比较常用的。
#15 SEO 回复该留言 2010-1-18 12:40:13

不错的代码，值得收藏。
diyidu 于 2010-1-18 13:33:00 回复
呵呵，欢迎拿走呵。
#16 集思博客回复该留言 2010-1-18 12:45:08

第一个很漂亮。
diyidu 于 2010-1-18 13:33:30 回复
谢谢哦。问好。
#17 liuzm 回复该留言 2010-1-18 13:00:22

看过了，我顶一下，不介意吧？
diyidu 于 2010-1-18 13:34:09 回复
二次回复以后要嘉奖。
#18 colin 回复该留言 2010-1-18 14:20:51

有时候用一点特效还是蛮好的。
diyidu 于 2010-1-18 17:20:56 回复
是哦，不会太单调。
#19 Tony 回复该留言 2010-1-18 14:26:49

恩，研究研究！以后用用什么的！
diyidu 于 2010-1-18 17:21:36 回复
恩，用吧，用得上的话。
#20 liuzm 回复该留言 2010-1-18 15:48:31

又看了一次，继续顶一下！我等到花都谢了。
diyidu 于 2010-1-18 17:20:14 回复
晕啊，兄弟是在等什么？
迷失于 2010-1-18 23:07:28 回复
他好像是等一个人的到来……
#21 Jclyn 回复该留言 2010-1-18 17:46:30

哇塞，看到代码我就晕。
膜拜膜拜了~~
diyidu 于 2010-1-19 13:57:34 回复
膜拜什么啊，晕啊。
#22 邓玮回复该留言 2010-1-18 17:54:10

博主再总结详尽一点，这个页面可以做成JS导航了。
diyidu 于 2010-1-19 13:58:26 回复
JS导航？是教程吧？呵呵。
#23 非博回复该留言 2010-1-18 19:03:02

不错，谢谢分享！
diyidu 于 2010-1-19 13:58:52 回复
不客气。
#24 mulnim 回复该留言 2010-1-18 22:51:59

学习了！好东西，哈哈。
diyidu 于 2010-1-19 13:59:24 回复
不要谦虚哦。多指点。
#25 17doit 回复该留言 2010-1-18 23:03:41

呵呵，我来回访了，这代码有时候挺有用。
diyidu 于 2010-1-19 14:00:06 回复
恩，欢迎您。
#26 吉光片羽回复该留言 2010-1-18 23:14:32

第二个我喜欢。
diyidu 于 2010-1-19 14:00:57 回复
问好啊。CN又没事了兄弟！
#27 笨笨回复该留言 2010-1-19 0:08:56

嘿嘿不错，很喜欢第六个。
diyidu 于 2010-1-19 14:01:41 回复
第六个只能在IE下用。
#28 快乐岛博客回复该留言 2010-1-19 0:39:14

强大之极，不学不行啊！谢谢博主分享。
diyidu 于 2010-1-19 14:02:25 回复
不客气啊，举手之劳，多谢捧场才对。
#29 猴子回复该留言 2010-1-19 5:22:52

都是不错的代码，感谢低一度分享：）
diyidu 于 2010-1-19 14:03:07 回复
不客气，问好下。
#30 te 回复该留言 2010-1-19 8:30:55

这些代码都很实用。
diyidu 于 2010-1-19 14:03:55 回复
比较常用，实不实用是仁者见仁啊。
#31 liuzm 回复该留言 2010-1-19 9:04:09

呵呵，等你更新文章，抢沙发咯，嘿嘿。
今天又没有更新，我只能再顶一下子咧。
diyidu 于 2010-1-19 14:04:43 回复
一会儿就更新，呵呵。
#32 ooaixt 回复该留言 2010-1-19 9:48:07

很实用的技巧，赞！
diyidu 于 2010-1-19 14:13:59 回复
谢赞，呵呵。
#33 路人庚回复该留言 2010-1-19 14:09:59

不错的特效，顶一个。
diyidu 于 2010-1-19 14:13:16 回复
谢谢来顶。
#34 越夜回复该留言 2010-1-19 15:27:29

哟西，发现了一个对我比较有用的，一会儿拿走。
diyidu 于 2010-1-19 16:30:04 回复
恩，用得上我很荣幸。
#35 秋天一棵树回复该留言 2010-1-21 9:50:21

我就是不会CSS，头疼。
diyidu 于 2010-1-21 10:05:14 回复
呵呵，学呗。
#36 Mr.小宇回复该留言 2010-1-21 23:52:55

第六个在谷歌浏览器上，好像不能正常显示。
挺棒的！
最喜欢那个打字效果的。
diyidu 于 2010-1-22 0:31:51 回复
是啊，有点可惜，想不出兼容的办法。
#37 丁回复该留言 2010-1-22 14:20:05

很不错，学习了，主题也很喜欢。
diyidu 于 2010-3-1 22:11:03 回复
谢谢喜欢。
#38 李超回复该留言 2010-3-1 20:20:55

代码不错，特效相当的好，实用。觉得代码挺长的，单独应用就不错。
diyidu 于 2010-3-1 22:12:02 回复
可以单独使用的。

低一度