bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/img/11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/img/12.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/img/13.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/img/14.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

BIN
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/img/15.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 890 KiB

BIN
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/img/16.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/img/17.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

166
历届学生/吴欣阳/项目开发/练习项目/课程练习/6.16/预览/index.html Normal file
View File

@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_p89wlanilpr.css">
<style>
body,
ul,
li,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.smallImg {
width: 100px;
}
.zhezhao {
width: 100vw;
height: 100vh;
background: #000;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 998;
opacity: .5;
}
.preview {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
display: flex;
justify-content: center;
}
.closed {
width: 40px;
height: 40px;
font-size: 24px;
color: #fff;
background-color: #606266;
text-align: center;
line-height: 35px;
position: absolute;
right: 10px;
top: 10px;
border-radius: 100%;
}
.action .d {
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
font-size: 24px;
color: #fff;
background-color: #606266;
border-color: #fff;
position: absolute;
text-align: center;
line-height: 40px;
border-radius: 100%;
}
.left {
left: 40px;
}
.right {
right: 40px;
}
.operation {
left: 50%;
bottom: 30px;
transform: translateX(-50%);
width: 282px;
height: 44px;
padding: 0 23px;
background-color: #606266;
border-color: #fff;
position: absolute;
border-radius: 22px;
display: flex;
justify-content: space-around;
align-items: center;
}
.operation li {}
.operation li i {
font-size: 23px;
color: #fff;
}
.xz {
display: inline-block;
transform: rotateY(180deg);
}
.mainImg {
height: 100%;
}
</style>
</head>
<body>
<div class="main">
<img class="smallImg" src="./img/11.png" alt="">
<div class="zhezhao"></div>
<div class="preview">
<div class="closed">x</div>
<div class="action">
<div class="left d">&lt;</div>
<div class="right d">&gt;</div>
</div>
<img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;" src="./img/11.png" alt="">
<ul class="operation">
<li>
<i class="iconfont icon-suoxiao suoxiao"></i>
</li>
<li>
<i class="iconfont icon-fangda fangda"></i>
</li>
<li>
<i class="iconfont icon-fullscreen fullscreen"></i>
</li>
<li class="xz">
<i class="iconfont icon-shuaxin leftshuaxin"></i>
</li>
<li>
<i class="iconfont icon-shuaxin rightshuaxin"></i>
</li>
</ul>
</div>
</div>
</body>
<script src="./index.js"></script>
</html>

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

@@ -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])
}