`
天梯梦
  • 浏览: 13632946 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

jQuery插件FontSizer实现自定义动态调整网页文字大小

jQueryJavaScriptCSSXHTMLHTML 
阅读更多

非常简单：

 

<!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=utf-8" />
<title>FontSizer Demo</title>
<!-- Include the FontSizer classes in you stylesheet -->
<link type="text/css" rel="stylesheet" href="css/default.css" />

<!-- Include the JQuery core and FontSizer scripts -->
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript" src="js/fontsizer.jquery.js"></script>

<!-- On document ready call the function with vars (small, medium, large) -->
<script language="javascript">
$(document).ready(function() {
  fontResizer('10px','11px','14px');
});
</script>
</head>
<body>
<!-- FontSizer box -->
<div class="fontResizer">
<a href="#" class="smallFont">A</a><a href="#" class="medFont">A</a><a href="#" class="largeFont">A</a>
</div>

<h1>Font Sizer Demo</h1>
<h2>Click the "A" Links to resize the fonts</h2>
<p>Font Sizer allows the user to dynamically increase or decrease the font size of any document with "em" specified font sizes.  Fonts that should remain constant should be size with the "px" unit.</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus at dui id felis malesuada tristique. Donec quam urna, mattis eget, faucibus id, sollicitudin quis, lacus. Mauris eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed blandit massa id ligula. Proin et dui sed mi sollicitudin convallis. Donec bibendum viverra nunc. Fusce nibh tortor, mattis et, congue vel, tristique sed, nunc. Aenean libero urna, blandit eu, tempor at, dignissim in, ante. Donec semper porta diam. Sed lorem neque, consequat id, aliquam a, sollicitudin tincidunt, ipsum. Aenean adipiscing lorem at orci. Fusce accumsan, orci non porta mattis, metus erat commodo justo, id placerat enim enim ut felis. Mauris velit.
</p>
<p>
Duis pede velit, tristique vitae, fringilla eu, tincidunt vitae, mauris. Mauris leo risus, lacinia nec, scelerisque pharetra, lacinia eu, turpis. Donec ullamcorper nisl convallis ante. Curabitur accumsan adipiscing ligula. Mauris dui enim, adipiscing eu, euismod sed, tristique a, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pellentesque. Morbi eget ante. Nullam luctus pretium massa. Aenean sed leo. Duis non massa id nulla tincidunt dictum. Aenean arcu. Aliquam pulvinar hendrerit dui. Aenean facilisis consequat risus. Phasellus vitae diam. Proin pulvinar venenatis elit. Donec est sem, porta sit amet, ornare eu, ultricies at, purus. Nam pretium dui in magna. Donec leo velit, interdum et, pulvinar eget, volutpat at, est.
</p>
<p>
Morbi pellentesque tortor porta purus. Donec ultrices elit vitae mauris. Cras massa. Praesent sem nisi, mollis sit amet, bibendum nec, dictum at, odio. Quisque accumsan luctus ipsum. Praesent rhoncus mattis velit. Integer auctor sapien id tellus. Morbi scelerisque justo a turpis. Fusce quis felis aliquet tellus ultricies tempus. Sed eget purus. Sed ornare lacus eu justo. Donec ut ante nec leo dapibus rutrum. Mauris rutrum viverra eros. Nullam porta diam a turpis. Ut congue, metus vitae dictum porttitor, enim libero elementum pede, eget adipiscing pede erat eu dolor. In condimentum congue mauris. Morbi dapibus risus eget lorem. Maecenas sit amet sapien. Integer sagittis.
</p>
</body>
</html>
 

代码下载：

 

 

 

分享到：
| WordPress后台保护插件 Sabre 和 电子商 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics