选中图片放大

图例：

效果图：

1,编写css样式
文件名称：page_home.css

@CHARSET "UTF-8";tml,body{
    margin: 0px;
    padding: 0px;
}

.onselect{
    transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    transform:scale(1.05); 	  //这个选中的大小可以在这里填写
    -webkit-transform:scale(1.05);   //这个选中的大小可以在这里填写
}
.fs_184x240:after{
    content: "";
    position: absolute;
    left: -5px;
    top: -5px;
    width: 184px;
    height: 240px;
    background-repeat: no-repeat;
    background-image: url('../imgs/system/fs_184x240.png'); //焦点框图片
    z-index:2;
}

2,引入资源

 <link rel="stylesheet" type="text/css" href="page_home.css"/>


<a href="javaScript:void(0);" id="test1"  cssvalue="fs_184x240 onselect" onfocus="onFocus(this.id)" onblur="onBlur(this.id)" style="position: absolute;top: 50px;left: 60px"><img width="174" height="230"   src="需要放大的图片地址"></a>';


<script type="text/javascript">

   onFocus: function (aid) {

            var cssvalue = $(aid).getAttribute('cssvalue');
            $(aid).className = cssvalue;//'content_a_fs';
        },
        onBlur: function (aid) {
            $(aid).className = '';
        },
  </script>