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

119
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/css/previewImage.css Normal file
View File

@@ -0,0 +1,119 @@
body,
ul,
li,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.smallImg {
width: 100px;
}
.hidden {
display: none;
}
.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%;
z-index: 999;
}
.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%;
z-index: 999;
}
.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%;
}

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/img/11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/img/12.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/img/13.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/img/14.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/img/15.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 890 KiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/img/16.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/img/17.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

52
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/index.html Normal file
View File

@@ -0,0 +1,52 @@
<!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>图片预览封装</title>
<link rel="stylesheet" href="./css/previewImage.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
</head>
<body>
<div class="list"></div>
</body>
<script src="./js/previewImage.js"></script>
<script>
var imgArr = [
'./img/11.png',
'./img/12.jpg',
'./img/13.jpg',
'./img/14.jpg',
'./img/15.png',
'./img/16.jpg',
'./img/17.jpg',
]
imgArr.forEach(function (v) {
document.querySelector(".list").innerHTML += `<img width="100" src="${v}"/>`
});
document.querySelectorAll(".list img").forEach(function (v, i) {
v.onclick = function () {
var c = new PreviewImage({
image: imgArr,
showIndex: i
});
c = null
}
})
</script>
</html>

267
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/js/previewImage.js Normal file
View File

@@ -0,0 +1,267 @@
class PreviewImage {
// 属性都是全局的
body = this.$("body");
option = {};
isBackMove = false;
x1 = 0;
y1 = 0;
l = 0;
t = 0;
constructor(option) {
if (!option.hasOwnProperty("image")) {
throw new Error("参数image缺少，请检查")
}
if (!option.hasOwnProperty("showIndex")) {
throw new Error("参数showIndex缺少，请检查")
}
this.option = option
console.log(this.option);
this.created();
this.BindClose();
this.BindPrevious();
this.BindNext();
this.BindSuoXiao();
this.BindFangDa();
this.BindFullScreen();
this.BindXuanZhuan();
this.MouseEvent();
}
// 1：把图片预览的html插入到网页上
created() {
this.body.insertAdjacentHTML("beforeend", `<div class="previewImage">
<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="${this.option.image[this.option.showIndex]}" 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>`)
}
// 缩小
BindSuoXiao() {
this.$(".suoxiao").onclick = () => {
var value = this.Scale() - 0.2;
if (value != 0) {
this.$(".mainImg").style.transform = `scale(${value}) rotate(${this.Rotate()}deg)`
}
}
}
// 全屏
BindFullScreen() {
this.$(".fullscreen").onclick = () => {
// true 缩小
if (this.$(".fullscreen").classList.contains("icon-fullscreen")) {
this.$(".fullscreen").classList.remove("icon-fullscreen")
this.$(".fullscreen").classList.add("icon-suoxiao1")
this.$(".mainImg").style = `
transform: scale(2) rotate(${this.Rotate()}deg);
margin-left: 0;
margin-top: 0;
`
// 放大
} else {
this.$(".fullscreen").classList.remove("icon-suoxiao1")
this.$(".fullscreen").classList.add("icon-fullscreen")
this.$(".mainImg").style = `
transform: scale(1) rotate(0deg);
margin-left: 0;
margin-top: 0;
`
}
}
}
// 放大
BindFangDa() {
this.$(".fangda").onclick = () => {
this.$(".mainImg").style.transform = `scale(${this.Scale() + 0.2}) rotate(${this.Rotate()}deg)`
}
}
// 旋转
BindXuanZhuan() {
// -90
this.$(".leftshuaxin").onclick = () => {
this.xuanzhuan(-90)
}
// +90
this.$(".rightshuaxin").onclick = () => {
this.xuanzhuan(90)
}
}
MouseEvent() {
// 鼠标滑动的时候放大缩小网页
document.onmousewheel = (e) => {
if (e.wheelDelta == 210) {
this.$(".fangda").onclick()
} else {
this.$(".suoxiao").onclick()
}
}
// document.addEventListener('mousewheel',(e) => {
// if (e.wheelDelta == 210) {
// this.$(".fangda").onclick()
// } else {
// this.$(".suoxiao").onclick()
// }
// },false)
// 鼠标在图片上按下的时候
this.$(".mainImg").onmousedown = (e) => {
e.preventDefault()
this.isBackMove = true
//获取鼠标按下的坐标
this.x1 = e.clientX;
this.y1 = e.clientY;
this.l = parseInt(this.$(".mainImg").style.marginLeft);
this.t = this.$(".mainImg").offsetTop;
this.ImgMove(".mainImg")
}
// 按住拖动，但鼠标从图片上离开的
// 给背景层绑定鼠标移动事件
this.$(".mainImg").onmouseleave = () => {
console.log("鼠标从图片上离开的，给背景层绑定鼠标移动事件");
if (this.isBackMove) {
this.ImgMove(".preview")
}
}
// 鼠标在背景层上松开
this.$(".preview").onmouseup = (ev) => {
console.log("鼠标在背景层上松开");
this.isBackMove = false
this.$(".mainImg").onmousemove = null;
this.$(".preview").onmousemove = null;
}
// 鼠标在图片上松开
this.$(".mainImg").onmouseup = (ev) => {
console.log("鼠标在图片上松开");
this.$(".mainImg").onmousemove = null;
this.$(".preview").onmousemove = null;
}
}
ImgMove(className) {
this.$(className).onmousemove = (ev) => {
var x2 = ev.clientX;
var y2 = ev.clientY;
//计算出鼠标的移动距离
var x = x2 - this.x1;
var y = y2 - this.y1;
//移动的数值与元素的left，top相加，得出元素的移动的距离
var lt = y + this.t;
var ls = x + this.l;
//更改元素的left，top值
this.$(".mainImg").style.marginLeft = ls + 'px';
this.$(".mainImg").style.marginTop = lt + 'px';
}
}
xuanzhuan(offset) {
this.$(".mainImg").style.transform = `scale(${this.Scale()}) rotate(${this.Rotate() + offset}deg)`
}
// 关闭按钮
BindClose() {
//1 var ddddc = this;
//2 es6 => 箭头函数
console.log("this1: ", this);
// this 指向
this.$(".closed").onclick = () => {
this.body.removeChild(this.$(".previewImage"))
}
}
// 上一页
BindPrevious() {
this.$(".left").onclick = () => {
this.option.showIndex -= 1;
if (this.option.showIndex < 0) {
this.option.showIndex = this.option.image.length - 1
}
this.$(".mainImg").src = this.option.image[this.option.showIndex]
}
}
// 下一页
BindNext() {
this.$(".right").onclick = () => {
this.option.showIndex += 1;
if (this.option.showIndex > this.option.image.length - 1) {
this.option.showIndex = 0
}
this.$(".mainImg").src = this.option.image[this.option.showIndex]
}
}
Scale() {
return Number(this.$(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
}
Rotate() {
return Number(this.$(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
}
$(className) {
return document.querySelector(className)
}
}

26
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/test.html Normal file
View File

@@ -0,0 +1,26 @@
<!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>
</head>
<body>
<button id="btn">点我</button>
</body>
<script>
var body = document.body;
var btn = document.getElementById('btn');
body.innerHTML += "<div class='newDiv'>新元素</div>";
btn.onclick = function () {
alert('hello');
}
</script>
</html>

40
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/this.html Normal file
View File

@@ -0,0 +1,40 @@
<!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>
</head>
<body>
</body>
<script>
// var o = {
// user: "追梦子",
// fn: function () {
// console.log(this);
// console.log(this.user); //追梦子
// }
// }
// // o.fn();
// var a = o.fn
// a()
// function a () {}
// var a = (nums,b) => console.log(nums,b)
// a(1,100)
</script>
</html>

60
历届学生/吴欣阳/项目开发/上课项目/js案例/previewImage/笔记.txt Normal file
View File

@@ -0,0 +1,60 @@
1: class 类
什么类？现实生活中事物在编程中的映射和封装
面向对象的编程
类的属性
类的方法
构造函数 & 析构函数
封装
继承
多态
class BaseCar {
// 打开车门
open() {
console.log("打开车门");
}
// 关闭车门
close() {
console.log("关闭车门");
}
}
class SmallCar extends BaseCar {
// 属性
speed = null;
// 构造函数
constructor (bbb) {
super()
console.log("类被初始化的时候第一个被自动执行的方法");
this.speed = bbb
}
nomusic() {
console.log("不能播放音乐");
console.log(this.speed);
}
}
class BigCar extends BaseCar {
music() {
console.log("能播放音乐");
}
}
var a = new SmallCar({
test: "参数"
});
// var b = new BigCar();
a.nomusic()