jQuery调整页面元素字体大小

来源:https://www.sucaihuo.com/js/1966.html 2017-05-18 19:19浏览(1568) 收藏

简单易用的通过jquery设置页面元素字体大小的特效,相对来说比较简单,看下面的教程就能操作了。
jQuery调整页面元素字体大小
分类:文字特效 > 文字动画 难易:入门级
查看演示 下载资源 下载积分: 30 积分

页面开头需要引入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"});
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2