<!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>jquery放大缩小文字</title>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("span").click(function(){
var theSize = $("#title").css("font-size");
var theTitleSize =parseFloat(theSize,10);//获取字体的大小
var units = theSize.slice(-2); //获取单位
var c_name = $(this).attr("class");//获取属性
if(c_name =="c_big"){//如果是放大则增大文字
if(theTitleSize <= 22){//判断大小,如果小于22px则减少
theTitleSize+=2;
}
}else if(c_name =="c_small"){//如果是缩小则缩小文字
if(theTitleSize >= 12){//判断大小,如果大于12px则减少
theTitleSize-=2;
}
}
$("#title").css("font-size",theTitleSize + units);//添加样式
});
});
</script>
<style type="text/css">
#content{
width:300px;
height:450px;
background:#000000;
}
.c_big{
width:30px;
height:15px;
background:#00F;
border:1px;
margin:20px 20px;
}
.c_small{
width:30px;
height:15px;
background:#00F;
border:1px;
margin:10px 20px;
}
#title{
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="content">
<div id="content_caption"><span class="c_big">放大</span><span class="c_small">缩小</span></div>
<div>
<p id="title">举得起放得下的叫举重,举得起放不下的叫负重。可惜,大多数人的爱情,都是负重的。
If you can hold something up and put it down, it is called weight-lifting; if you can hold something up but can never put it down,it's called burden-bearing. Pitifully, most of people are bearing heavy burdens when they are in love.
</p></div>
</div>
</body>
</html>
jquery放大缩小文字
精选 转载
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
android 让图片放大缩小 安卓图片放大缩小
这是我写的第一篇博客。本人刚学android没多久,写的博里面肯定有错误,希望走过路过的能指出,大家共同进步。行了,废话不多说,这篇博客主要是记录一下android图片的下载,还有viewPager里能实现对图片的放大和缩小,这里主要是用到了第三方工具,分别是imageload和photoview,只要项目涉及到图片,那么这两个好东西能帮我们减轻不少压力。1.用普通方法和imageload从网络获
android 让图片放大缩小 viewPager图片缩放 imageload photoView使用 android