ut="this.style.fontSize=100">网页教学网 </p> </body> </html> 以上实例是利用内联改变字体样式,当鼠标指向“网页教学网”时字体因为定义了this.style.fontSize=200,这两个字放大至200pt,当鼠标移开“网页教学网”时,因定义了this.style.fontSize=100,这两个字体缩小到100pt.
2.JavaScript引发事件。
<html> <head> <style> H1.italic {font-style:italic} H1.bold {font-style:bold; } </style> </head> <body> <script language="JavaScript"> function changeHead() { if (H1_1.className=="bold") { H1_1.className="italic" } else { H1_1.className="bold";} } </script> <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的资料来看,因为它们才是实现所有“梦想”的工具。
上一页 [1] [2] [3] [4]
|