42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
var suoxiao = $(".suoxiao"),
|
|
fangda = $(".fangda"),
|
|
fullscreen = $(".fullscreen"),
|
|
leftshuaxin = $(".leftshuaxin"),
|
|
rightshuaxin = $(".rightshuaxin");
|
|
var mainImg = $(".mainImg")
|
|
|
|
suoxiao.onclick = function() {
|
|
var value = Scale() - 0.2;
|
|
if (value != 0) {
|
|
$(".mainImg").style.transform = `scale(${value}) rotate(${Rotate()}deg)`
|
|
}
|
|
}
|
|
fangda.onclick = function() {
|
|
$(".mainImg").style.transform = `scale(${Scale() + 0.2}) rotate(${Rotate()}deg)` //两个值都有才可以使用
|
|
}
|
|
fullscreen.onclick = function() {
|
|
$(".mainImg").style.transform = `scale(2) rotate(${Rotate()}deg)`
|
|
}
|
|
leftshuaxin.onclick = function() {
|
|
xuanzhuan(-90)
|
|
}
|
|
rightshuaxin.onclick = function() {
|
|
xuanzhuan(90)
|
|
}
|
|
|
|
//封装
|
|
function $(className) {
|
|
return document.querySelector(className);
|
|
}
|
|
|
|
function xuanzhuan(offset) {
|
|
$(".mainImg").style.transform = `scale(${Scale()}) rotate(${Rotate() + offset}deg)`
|
|
}
|
|
|
|
function Scale() { //获取缩小的值
|
|
return Number($(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
|
|
}
|
|
|
|
function Rotate() { //获取旋转的值
|
|
return Number($(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
|
|
} |