www.baike369.com
百科369 > JS教程 > JavaScript使用onmouseover和onmouseout事件制作文本放大镜

JavaScript使用onmouseover和onmouseout事件制作文本放大镜


JavaScript使用onmouseover和onmouseout事件制作文本放大镜

有些网页为了显示足够多的内容,把文本字体变得很小。为了让读者可以轻松地阅读文本,可以制作一个简单的文本放大镜。


实例

下面是一个制作文本放大镜的例子。源代码如下:

<!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" />
<title>JavaScript使用onmouseover和onmouseout事件制作文本放大镜实例-www.baike369.com</title>
</head>
<body>
<p>这是旧文本,一般大小</p>
<!--使用百分比来设置放大的比例-->
<p onmouseover="this.style.zoom='180%'" onmouseout="this.style.zoom='normal'">这是新文本,放大180倍</p>
<p>这是旧文本,一般大小</p>
</body>
</html>

显示效果如下:

JavaScript使用onmouseover和onmouseout事件制作文本放大镜实例

Copyright© 2011-2016 www.baike369.com All Rights Reserved