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%);
 }