简单易用的通过jquery设置页面元素字体大小的特效,相对来说比较简单,看下面的教程就能操作了。
页面开头需要引入CSS样式,调入jquery库和javascript插件:
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/index.js"></script>
body部分其实比较简单,可以设置任何元素内的字体大小,关键取决于index.js里面的设置:
<div id="wrapper">
<div id="controls"><a href="#" id="small">小</a> <a href="#" id="medium" class="selected">中</a> <a href="#" id="large">大</a></div>
<h1>你到底想要什么?</h1>
<h2>健康、快乐、财富、幸福……</h2>
<p>我们都受一个威力无穷的自然力量支配。我们都被同一个规律指导着。宇宙中的自然规律是如此的精确。以至于我们可以运用这些规律来建造宇宙飞船而毫无困难。我们可以把人送到月球。也可以把着陆时间精确到秒的几分之一。不论你是那里我们都受同一种力量和规律的支配,这就是——吸引力!</p>
</div>
index.js里面的部分代码如下:
$("#medium").click(function(event){
event.preventDefault();
$("h1").animate({"font-size":"28px"});
$("h2").animate({"font-size":"22px"});
$("p").animate({"font-size":"15px", "line-height":"2em"});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791