图片放大方法

图片放大方法有很多种，最直接粗暴的莫过于直接一个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; 
    width: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; 
    width: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>

　　效果图如下：

　　

放大之后

posted @ 2017-12-06 09:56  柠檬张先生  阅读(1131)  评论(0)  编辑  收藏  举报