JQ+Css3圖片預覽（旋轉、縮放、切換）
阿新 • • 發佈：2020-10-20
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() }) })