HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片組件</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<!-- 圖片初始化列表 -->
<div class="pic_wrapp">
<ul class="uls">
<li class="li_item"><img src="p1.jpg" class="img_1"/></li>
</ul>
</div>
<div class="hidden"></div>
<!-- 圖片展示區域 -->
<div class="show_pic_wrapp">
<img class="img_show" src="p1.jpg"/>
</div>
<script src="index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
css部分：
body
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
* {
padding: 0;
margin: 0;
}
.uls {
list-style: none;
display: flex;
justify-content: center;
}
.li_item {
cursor: pointer;
}
.show_pic_wrapp {
transition: all 0.3s linear;
background: white;
border-radius: 20px;
width: 600px;
height: 600px;
overflow: hidden;
/* margin: 0 auto; */
text-align: center;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform-origin: center;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
z-index: 22;
}
.img_show {
width: 100%;
transform: scale(1);
}
.hidden {
display: none;
position: fixed;
background: rgba(0,0,0,0.3);
top: 0px;
bottom: 0px;
width: 100%;
}
.showIt {
transform-origin: center;
-webkit-transform:translate(-50%, -50%) scale(1) ;
transform:translate(-50%, -50%) scale(1) ;
}
/* @keyframes aniShowIt{
from{transform: scale(0);}
to{transform: scale(1);}
} */
js部分：
(function(window) {
var li_item = document.getElementsByClassName('li_item')[0];
var show_pic_wrapp = document.getElementsByClassName('show_pic_wrapp')[0];
var hidden = document.getElementsByClassName('hidden')[0];
var img_show = document.getElementsByClassName('img_show')[0];
// var pic_wrapp_width = parseInt(window.getComputedStyle(show_pic_wrapp,null).width);
var initWidth = 100;
var sign = true;//標記鼠標是否停留在圖片容器中
var SIZE = 0.2;//滾輪滾動刻度
var MAX_SIZE = 5;//設置最大縮放
var MIN_SIEZE = 0.5;//設置最小縮放
var DEG = 0;//設置初始角度
var degArr = ['0deg','90deg','180deg','270deg','360deg'];//設置初始角度數組
//圖片容器點擊
li_item.addEventListener("click",function(){
//彈出圖片組件
hidden.style.cssText = 'display: block;'
//圖片寬度初始化
img_show.style.cssText = 'width:'+initWidth+'% ;'
show_pic_wrapp.className = 'show_pic_wrapp showIt'
})
//遮罩層點擊
hidden.onclick = function(e){
e.stopPropagation();
e.preventDefault()
//點擊蒙層隱藏
this.style.cssText = 'display:none;'
show_pic_wrapp.className= 'show_pic_wrapp'
}
//圖片點擊
show_pic_wrapp.onclick = function(e){
e.stopPropagation();
e.preventDefault();
DEG++
//轉動角度數組
var newDeg = degArr[DEG%4];
console.log(newDeg)
img_show.style.cssText = 'transform: rotate('+newDeg+') scale('+getTransform(img_show)+');'
}
//監聽鼠標移入
show_pic_wrapp.onmouseover = function(){
if(sign){
this.onmousewheel = function (e) {
// 計算圖片與容器的比例
// var newWidth = Math.floor((parseInt(window.getComputedStyle(img_show,null).width)/pic_wrapp_width)*100);
var newWidth = getTransform(img_show);
console.log('newWidth:'+newWidth)
e = e || window.event;
if (e.wheelDelta) { //判斷瀏覽器IE，谷歌滑輪事件
if (e.wheelDelta > 0) { //當滑輪向上滾動時
newWidth+=SIZE;
}
if (e.wheelDelta < 0) { //當滑輪向下滾動時
newWidth-=SIZE;
}
}
// //設置極限提示
// if(newWidth<MIN_SIEZE){
// alert("客官，我不能再小咯！")
// }else if(newWidth>MAX_SIZE){
// alert("客官，我不能再大咯！")
// }
newWidth = Math.max(newWidth,MIN_SIEZE);
newWidth = Math.min(newWidth,MAX_SIZE);
img_show.style.cssText = 'transform: scale('+newWidth+');'
}
}
}
//監聽鼠標移除
show_pic_wrapp.onmouseout = function(){
sign = false;
}
/*
@desc:獲取el的transform屬性值
*/
function getTransform(el) {
var st = window.getComputedStyle(el, null)
var tr = st.getPropertyValue("-webkit-transform") ||
st.getPropertyValue("-moz-transform") ||
st.getPropertyValue("-ms-transform") ||
st.getPropertyValue("-o-transform") ||
st.getPropertyValue("transform") ||
"FAIL"
//這裏獲取的值是maxtri 需要先提取特定的值 然後再獲取縮放值
var values = tr.split('(')[1].split(')')[0].split(',')
var a = values[0]
var b = values[1]
var scale = Math.sqrt(a * a + b * b)
return scale
}
})(window);