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

71
历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/css/iconfont.css Normal file
View File

@@ -0,0 +1,71 @@
@font-face {
font-family: "iconfont"; /* Project id 3445167 */
src: url('iconfont.woff2?t=1655693871496') format('woff2'),
url('iconfont.woff?t=1655693871496') format('woff'),
url('iconfont.ttf?t=1655693871496') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-close:before {
content: "\e6a7";
}
.icon-yulanxuanzhuan:before {
content: "\e627";
}
.icon-quanping:before {
content: "\e626";
}
.icon-suoxiao:before {
content: "\ec13";
}
.icon-fangda:before {
content: "\ec14";
}
.icon-beijingyibiyi:before {
content: "\e64f";
}
.icon-fanhui:before {
content: "\e601";
}
.icon-yunshangchuan:before {
content: "\e600";
}
.icon-xiazai:before {
content: "\e668";
}
.icon-sousuo:before {
content: "\e752";
}
.icon-z044:before {
content: "\e630";
}
.icon-jiahao:before {
content: "\eaf3";
}
.icon-gengduo:before {
content: "\e620";
}
.icon-shuaxin:before {
content: "\e631";
}

BIN
历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/css/iconfont.ttf Normal file
View File

Binary file not shown.

BIN
历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/css/iconfont.woff Normal file
View File

Binary file not shown.

BIN
历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/css/iconfont.woff2 Normal file
View File

Binary file not shown.

83
历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/css/preview.css Normal file
View File

@@ -0,0 +1,83 @@
.preview {
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.preview_task {
width: 100%;
height: 100%;
background: #0000008a;
position: absolute;
z-index: -1;
}
.preview_wrap {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.preview_img {
height: 100%;
position: relative;
z-index: 10;
}
.preview_close {
position: absolute;
right: 20px;
top: 20px;
color: #fff;
z-index: 9;
font-size: 28px;
}
.navigation {
position: absolute;
z-index: 9;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 27px;
background: #939090;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
}
.navigation_left {
left: 10px;
}
.navigation_right {
right: 10px;
}
.preview_list {
width: 282px;
height: 44px;
position: absolute;
z-index: 11;
left: 50%;
bottom: 30px;
display: flex;
align-items: center;
justify-content: space-between;
transform: translateX(-50%);
padding: 0 23px;
background-color: #606266;
box-sizing: border-box;
border-radius: 22px;
color: #fff
}
.preview_list .preview_list_item {
cursor: pointer;
}
.preview_list .right {
transform: rotateY(180deg);
}

67
历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/index.html Normal file
View File

@@ -0,0 +1,67 @@
<!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">
<link rel="stylesheet" href="./css/iconfont.css">
<link rel="stylesheet" href="./css/preview.css">
<title>图片预览</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.main img {
width: 200px;
}
</style>
</head>
<body>
<div class="main"></div>
</body>
<script src="./index.js"></script>
<script>
var img = [
'https://img1.baidu.com/it/u=2863108920,4275403644&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
'https://img2.baidu.com/it/u=3395582942,4228440123&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
'https://img1.baidu.com/it/u=2638231904,4072091792&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
'https://img2.baidu.com/it/u=2311492523,2796016539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281'
];
img.forEach(v => {
$(".main").innerHTML += ` <img src="${v}" alt="">`
})
_(".main img").forEach((v, i) => {
v.onclick = () => {
console.log(v);
new PicturePreview({
index: i,
arr: img
})
}
})
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

195
历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/index.js Normal file
View File

@@ -0,0 +1,195 @@
// class 类
// 其实就是现实生活中具体事物在编程中的表现
// 莫一个事物具体的属性(变量)和功能（方法）
// 构造函数 constructor
// 类被初始化(new)的时候，第一个默认执行的方法
// 做参数的接受和保存
// 本质上就是 object
// 语法糖
class PicturePreview {
scale = 1;
rotate = 0;
constructor(params) {
this.params = params;
this.initHtml();
}
initHtml () {
this.$("body").insertAdjacentHTML('beforeend', `
<div class="preview">
<div class="preview_task"></div>
<div class="preview_wrap">
<img style="transform: scale(${this.scale}) rotate(${this.rotate}deg);margin-left: 0px;margin-top: 0px;" class="preview_img" src="${this.params.arr[this.params.index]}" alt="">
</div>
<div class="preview_close iconfont icon-close"></div>
<div class="navigation navigation_left iconfont icon-fanhui"></div>
<div class="navigation navigation_right iconfont icon-gengduo"></div>
<div class="preview_list">
<div class="iconfont icon-suoxiao preview_list_item"></div>
<div class="iconfont icon-fangda preview_list_item"></div>
<div class="iconfont icon-quanping sf preview_list_item"></div>
<div class="iconfont icon-yulanxuanzhuan left preview_list_item"></div>
<div class="iconfont icon-yulanxuanzhuan right preview_list_item"></div>
</div>
</div>
`)
this.bindEvents()
}
bindEvents() {
this.$(".preview_wrap img").onmousedown = (e) => {
e.preventDefault();
this.startX = e.x;
this.startY = e.y;
this.status = true
this.oldLeft = parseInt(this.$(".preview_wrap img").style.marginLeft)
this.oldTop = parseInt(this.$(".preview_wrap img").style.marginTop)
this.moveEl(".preview_wrap img")
this.$(".preview_wrap img").onmouseout = (e) => {
this.$(".preview_wrap img").onmousemove = null
if ( this.status) {
this.moveEl(".preview_wrap")
}
}
}
this.$(".preview_wrap img").onmouseup = (e) => {
this.status = false
this.$(".preview_wrap img").onmousemove = null
}
this.$(".preview_wrap").onmouseup = (e) => {
this.status = false
this.$(".preview_wrap").onmousemove = null
}
this.$(".preview_close").onclick = () => {
this.$("body").removeChild(this.$(".preview"))
}
// 上一页
this.$(".icon-fanhui").onclick = () => {
this.params.index -= 1
if (this.params.index < 0) {
this.params.index = 0
}
this.$(".preview_img").src = this.params.arr[this.params.index]
}
// 下一页
this.$(".icon-gengduo").onclick = () => {
this.params.index += 1
if (this.params.index > (this.params.arr.length -1)) {
this.params.index = this.params.arr.length -1
}
this.$(".preview_img").src = this.params.arr[this.params.index]
}
this.$(".icon-suoxiao").onclick = () => {
this.scale -= 0.2;
if (this.scale <= 0.2) {
this.scale = 0.2
}
this.transform()
}
this.$(".icon-fangda").onclick = () => {
this.scale += 0.2;
this.transform()
}
this.$(".left").onclick = () => {
this.rotate -= 90
this.transform()
}
this.$(".right").onclick = () => {
this.rotate += 90
this.transform()
}
this.$(".sf").onclick = () => {
this.scale = 1
this.rotate = 0
this.transform()
if (this.$(".sf").classList.contains("icon-quanping")) {
this.$(".preview_wrap img").style.height = "auto"
this.$(".sf").classList.replace("icon-quanping", "icon-beijingyibiyi")
} else {
this.$(".preview_wrap img").style.height = "100%"
this.$(".sf").classList.replace("icon-beijingyibiyi", "icon-quanping")
}
}
}
transform() {
this.$(".preview_wrap img").style = `
transform: scale(${this.scale}) rotate(${this.rotate}deg);
margin-left: ${parseInt(this.$(".preview_wrap img").style.marginLeft)}px;
margin-top: ${parseInt(this.$(".preview_wrap img").style.marginTop)}px;
`
}
moveEl(className) {
this.$(className).onmousemove = (e) => {
e.stopPropagation();
e.preventDefault();
var endX = e.x - this.startX;
var endY = e.y - this.startY;
this.$(".preview_wrap img").style.marginLeft = `${endX + this.oldLeft}px`
this.$(".preview_wrap img").style.marginTop = `${endY + this.oldTop}px`
}
}
$(className) {
return document.querySelector(className)
}
}
// 箭头函数会解绑（释放） this 执行
// bind call apply
// var PicturePreview = {
// init (test) {
// console.log(this);
// this.a = test;
// },
// getA: function() {
// console.log(this.a);
// }
// }
// window.PicturePreview.init()