first commit

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/index.js

@@ -0,0 +1,42 @@
+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])
+}