jQuery 实现图片放大两种方式
一、利用css样式表实现，多用于后台显示
1、这种比较简单，利用dom元素的hover实现样式切换
1 <style>
2 img{
3 cursor: pointer;
4 transition: all 0.6s;
5 }
6 img:hover{
7 transform: scale(12);
8 }
9 </style>
二、利用jQuery点击事件来触发，多用于手机端单个图片
1、首先页面上有一张一模一样的图，只不过存放该图片的div是隐藏的
1 <div id="big_img" style="display: none">
2 <img src="{$user.logo}">
3 </div>
4 <div id="small_img" class="head_big_img">
5 <img src='{$user.logo}'>
6 </div>
2、然后通过点击小图将大图显示出来，点击大图将自身隐藏
1 <script>
2 $(function () {
3 $("#big_img").click(function(){
4 $("#big_img").hide();
5 });
6 $("#small_img").click(function(){
7 $("#big_img").show();
8 });
9 })
10 </script>
3、这是大图的样式，小图样式自定义
1 /*放大图片*/
2 #big_img{
3 position: absolute;
4 top: 0;
5 right: 0;
6 bottom: 0;
7 left: 0;
8 background-color: rgba(0,0,0,0.45);
9 z-index: 999;
10 }
11 #big_img img{
12 90%;
13 position: absolute;
14 top: 50%;
15 left: 50%;
16 transform: translate(-50%,-50%);
17 }