jQuery 实现图片放大两种方式

jQuery 实现图片放大两种方式

一、利用css样式表实现，多用于后台显示

1、这种比较简单，利用dom元素的hover实现样式切换

<style>
    img{
        cursor: pointer;
        transition: all 0.6s;
    }
    img:hover{
        transform: scale(12);
    }
</style>

二、利用jQuery点击事件来触发，多用于手机端单个图片

1、首先页面上有一张一模一样的图，只不过存放该图片的div是隐藏的

<div id="big_img" style="display: none">
    <img src="{$user.logo}">
</div>
<div id="small_img" class="head_big_img">
    <img src='{$user.logo}'>
</div>

2、然后通过点击小图将大图显示出来，点击大图将自身隐藏

<script>
    $(function () {
        $("#big_img").click(function(){
            $("#big_img").hide();
        });
        $("#small_img").click(function(){
            $("#big_img").show();
        });
     })
</script>

3、这是大图的样式，小图样式自定义

/*放大图片*/
#big_img{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.45);
    z-index: 999;
}
#big_img img{
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}