图片放大方法有很多种，最直接粗暴的莫过于直接一个img标签固定高宽。
今天学习了一种通过控制字体大小来控制图片大小的方法。
点击看效果demo
<a href="#" class="zxx_image_list">
<img class="zxx_image" src="../../pic&wordLineInMiddle/images/img1.jpg" />
</a>
将图片放入a标签中
内层图片样式
.zxx_image_list img.zxx_image{
padding:3px;
border:1px solid #828da1;
background:white;
vertical-align:middle;
position:relative;
}
再给定固定的长宽单位，不过使用em来代替像素。em是一种相对于文本的长度单位
.zxx_image_list{
display:inline-block;
1.2em;
margin-top:20px;
text-align:center;
font-size:128px;
vertical-align:middle;
}
这样就可以控制上面a样式的字体大小，来控制图片的大小。
整个demo源码如下：
<!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>
<title>jQuery之replace字符串替换实现大小图片切换</title>
<link rel="stylesheet" href="../css/common.css" type="text/css" />
<style type="text/css">
#choose{
padding:0.5em 1.5em;
border-bottom:1px solid #dddddd;
}
.btn{
display:inline-block;
padding:4px 9px;
color:#666666;
text-decoration:none;
}
.btn:hover,.on{
padding:3px 8px;
border:1px solid #73818C;
color:#3E6173;
-moz-border-radius:2px;
-webkit-border-radius:2px;
}
.on,.on:hover{
background:#f4f4f4;
color:#333333;
cursor:default;
}
.v_line{
font-size:1.3em;
vertical-align:top;
margin:0 5px;
}
.zxx_image_list{
display:inline-block;
1.2em;
margin-top:20px;
text-align:center;
font-size:128px;
vertical-align:middle;
}
.zxx_image_list img.zxx_image{
padding:3px;
border:1px solid #828da1;
background:white;
vertical-align:middle;
position:relative;
}
.zxx_image_list:hover,.zxx_image_list:hover .zxx_image{border-color:#ff3300;}
</style>
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
</head>
<body>
<div class="zxx_out_box">
<div class="zxx_in_box">
<h3 class="zxx_title">jQuery之replace字符串替换实现大小图片切换</h3>
<div id="choose">
<a href="javascript:void(null);" class="btn on" id="small_pic">小图</a>
<span class="v_line">|</span>
<a href="javascript:void(null);" class="btn" id="big_pic">大图</a>
</div>
<div class="zxx_main_con mt20 mb20">
<a href="#" class="zxx_image_list">
<img class="zxx_image" src="../../pic&wordLineInMiddle/images/img1.jpg" />
</a>
<a href="#" class="zxx_image_list">
<img class="zxx_image" src="../../pic&wordLineInMiddle/images/img2.jpg" />
</a>
<a href="#" class="zxx_image_list">
<img class="zxx_image" src="../../pic&wordLineInMiddle/images/img3.jpg" />
</a>
<a href="#" class="zxx_image_list">
<img class="zxx_image" src="../../pic&wordLineInMiddle/images/img4.jpg" />
</a>
<a href="#" class="zxx_image_list">
<img class="zxx_image" src="../../pic&wordLineInMiddle/images/img5.jpg" />
</a>
<a href="#" class="zxx_image_list">
<img class="zxx_image" src="../../pic&wordLineInMiddle/images/img7.jpg" />
</a>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
//给图片高宽转换为以em单位
$(".zxx_image").each(function(){
var emW=$(this).width()/128+"em";
var emH=$(this).height()/128+"em";
$(this).css("width",emW);
$(this).css("height",emH)
});
function srcChg(a,b){
$(".zxx_image").each(function(){
var new_src=$(this).attr("src").replace(a,b); //字符串替换，更改图片路径
//alert(new_src);
$(this).attr("src",new_src);
});
}
$("#small_pic").click(function(){
if($(this).hasClass("on")) return;
else{
$("#big_pic").removeClass("on");
$(this).addClass("on");
$(".zxx_image_list").css("font-size","128px");
srcChg("s256","s128");
return false; //使单击后IE6下图片正常加载
}
});
$("#big_pic").click(function(){
if($(this).hasClass("on")) return;
else{
$("#small_pic").removeClass("on");
$(this).addClass("on");
$(".zxx_image_list").css("font-size","256px");
srcChg("s128","s256");
return false;
}
});
});
</script>
</body>
</html>
效果图如下：
放大之后
