JQ+Css3图片预览（旋转、缩放、切换）

最新推荐文章于 2023-06-28 09:55:31 发布

@baby张

最新推荐文章于 2023-06-28 09:55:31 发布

阅读量2.7k

点赞数 2

分类专栏：实用组件 JS 文章标签：图片缩放图片预览前端图片预览 JQ+css3

本文链接：https://blog.csdn.net/weixin_43648947/article/details/88132986

版权

JS 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

实用组件

7 篇文章 0 订阅

订阅专栏

先看效果
我这里的缩小和放大比例都是一倍，旋转角度90°，可以自己调整，效果跟react版的一样。
在这里插入图片描述
html结构
···

</style>
</head>
<body>
    <h1>demo一个神奇的框架</h1>
    <p>(点击预览)</p>
    <!-- <img src="" style="width:200px;height:100px"> -->
    <div class="showimg"></div>
    <div class="dilong toggleshow"></div>
    <div class="bigimg toggleshow">
        <button class="close">X</button>
        <button class="left">左</button>
        <img src="http://img.s.youfenba.com/material_thumb/BYX6Mm67ba.jpg" class="imgstyle">
        <button class="right">右</button>
        <button class="rotateright">顺旋转</button>
        <button class="rotateleft">逆旋转</button>
        <button class="showbig">放大</button>
        <button class="showmin">缩小</button>
    </div>
</body>

```

JQ代码

$(function(){
    //模拟数据图片
 var  data = [
 'http://img.s.youfenba.com/material_thumb/BYX6Mm67ba.jpg',
 'http://img.s.youfenba.com/material_thumb/8nzxJwpsPX.jpg',
 'http://img.s.youfenba.com/material_thumb/SaNktASjmp.jpg',
 'http://img.s.youfenba.com/material_thumb/cTma2FTPEC.jpg',
 'http://img.s.youfenba.com/material_thumb/KnNc6D4sGs.jpg']   //****图片地址必须放数组中
  var _html = '' 
  var f = 0  ; R = 0 ; S = 1 ;i = 0 ; SS = 1
  for(var i=0;i<data.length;i++){
      _html += `<img style="width:200px;height:100px" src="${data[i]}">`
  }
$('.showimg').html(_html)
    //模拟数据图片

//点击查看预览
$('img').click(function(){
    f = data.indexOf($(this).attr('src'))  //获取点击预览的下标
    R = 0
    S = 1
    i = 0
    SS = 1
    $('.imgstyle').css({'transform':"translate(-50% ,-50%) rotate("+R+"deg) scale("+SS+","+SS+")"})
    $('.imgstyle').attr('src',data[f])  //显示框中img src 赋值
    $('.toggleshow').toggle()  //弹框显示隐藏
})

//左预览 ---
$('.left').click(function(){
    if(f==0){
        f=4
    }else{
        f--
    }
    $('.imgstyle').attr('src',data[f])
})

//右预览+++
$('.right').click(function(){
    if(f==4){
        f=0
    }else{
        f++
    }
    $('.imgstyle').attr('src',data[f])
})

//顺时针旋转
$('.rotateright').click(function(){
    R += 90
    $('.imgstyle').css({'transform':"translate(-50% ,-50%) rotate("+R+"deg) scale("+SS+","+SS+")"})
})

//逆时针旋转
$('.rotateleft').click(function(){
    R -= 90
    $('.imgstyle').css({'transform':"translate(-50% ,-50%) rotate("+R+"deg) scale("+SS+","+SS+")"})
})

//放大
$('.showbig').click(function(){
    if(i>=0){
      S++  
      i++
      SS = 1*S
    }else if(i<0){
        S--
        i++
        SS = 1/S
    }
    $('.imgstyle').css({'transform':"translate(-50% ,-50%) rotate("+R+"deg) scale("+SS+","+SS+")"})
})
//缩小
$('.showmin').click(function(){
    if(i<=0){
        i--
        S++
        SS = 1/S
    }else{
        i--
        S--
        SS = 1*S
    }
    $('.imgstyle').css({'transform':"translate(-50% ,-50%) rotate("+R+"deg) scale("+SS+","+SS+")"})
})
// 点击X 或者黑背景关闭
$('.dilong , .close').click(function(){
    $('.toggleshow').toggle()
})

})

@baby张

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQ+Css3图片预览（旋转、缩放、切换）

html结构···&lt;/style&gt;&lt;/head&gt;&lt;body&gt; &lt;h1&gt;demo一个神奇的框架&lt;/h1&gt; &lt;p&gt;(点击预览)&lt;/p&gt; &lt;!-- &lt;img src="" style="width:200px;height:100p
复制链接

扫一扫

专栏目录