JQ+Css3图片预览（旋转、缩放、切换）
@baby张 2019-03-04 19:17:13 2107 收藏 1
分类专栏： 实用组件 JS 文章标签： 图片缩放 图片预览 前端图片预览 JQ+css3
版权
先看效果
我这里的缩小和放大比例都是一倍，旋转角度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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
```
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()
})
})
