01234567890123
新新人类
帖子
33
精华
0
无忧币 185
积分 175
阅读权限 20
|
发表于:2007-8-22 13:18
标题：让字体美起来(3)
＜上一帖 |
下一帖＞
三.让字体动起来
要让字体动起来，我们可以利用本身CSS的事件或者让JavaScript引发事件。
1.CSS引发事件
例一
＜html＞
＜head＞
＜/head＞
＜body＞
＜p＞＜a href="http://zgrtt.yeah.net/"＞田涛＜/a＞＜/p＞
＜/body＞
＜/html＞
link定义的是链接在页面显示的颜色(黑色)及链接没有下划线，visited定义的是单击链接后的颜色(白色)，hover定义的是指向链接时的动态颜色。以上实例表示，当指向链接“田涛”后字体颜色从黑色变成蓝色，并加下划线，单击链接后，链接颜色变成白色。
例二
＜html＞
＜head＞
＜title＞＜/title＞
＜/head＞
＜body＞
＜p onmouseover="this.style.fontSize=200" onmouseout="this.style.fontSize=100"＞田涛 ＜/p＞
＜/body＞
＜/html＞
以上实例是利用内联改变字体样式，当鼠标指向“田涛”时字体因为定义了this.style.fontSize=200，这两个字放大至200pt,当鼠标移开“田涛”时，因定义了this.style.fontSize=100，这两个字体缩小到100pt.
2.JavaScript引发事件
＜html＞
＜head＞
＜/head＞
＜body＞
＜h1 id="H1_1" class="bold" onmouseover="changeHead()" onmouseout="changeHead()"＞田涛 ＜/h1＞
＜/body＞
＜/html＞
在上面的实例当中，我们首先定义了两个CSS类H1.italic和H1.bold，然后利用JavaScript脚本定义函数 changeHead(),最后在需要的地方引发事件执行定义好的函数。这里我们引发了两个单击事件onmouseover和onmouseout。在这里我还要说一点，因为你定义了H1两个类H1.italic 和H1.bold，所以当你在引用时，要首先设置class="bold"，表示字体以bold样式出现。然后，移动鼠标到“田涛”上，触发了事件一，移开“田涛”时，触发了事件二。
对于动态字体，我们还有很多方法来完善它。只是在考虑利用动态字体时，需要了解不同浏览器会产生不一样的结果。这时侯，就需要不停测试，来找到一个两全其美的方法。最后，希望你在看完这篇文章后，找一点CSS及JavaScript的资料来看，因为它们才是实现所有“梦想”的工具。
|
论坛活动：测测你对IT技术大会的了解指数(赠微软礼品、无忧币) |
|
| 诚征版主 | 版主堂 | 意见建议 | 大史记 | 论坛地图