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

51
历届学生/fontendsix/项目练习/上课项目/图片预览/ImagePreview.html Normal file
View File

@@ -0,0 +1,51 @@
<!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/clear.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_g3xukxxa1z.css">
<link rel="stylesheet" href="./css/ImagePreview.css">
<style>
.smail {
width: 100px;
}
</style>
</head>
<body>
<div class="imgList"></div>
</body>
<script src="./js/ImagePreview.js"></script>
<script>
var img = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg']
img.forEach(v => {
document.querySelector(".imgList").innerHTML += `<img class="smail" src="${v}" alt="">`
})
document.querySelectorAll(".imgList img").forEach((v, i) => {
v.onclick = () => {
console.log(v,i);
new ImagePreview({
images: img,
startPosition: i,
showPagination: true,
onChange: (index) => {
console.log("你当前切换：", index);
},
onClose() {
console.log("关闭了");
},
});
}
})
</script>
</html>

104
历届学生/fontendsix/项目练习/上课项目/图片预览/css/ImagePreview.css Normal file
View File

@@ -0,0 +1,104 @@
.bmy_image_preview {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 9999999;
}
.bmy_mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .5;
background: #000;
z-index: -1;
}
.bmy_menu {
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
width: 282px;
height: 44px;
padding: 0 23px;
background-color: #606266;
border-color: #fff;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: space-between;
opacity: .8;
}
.bmy_menu i {
color: #fff;
font-size: 23px;
font-weight: 400;
}
.bmy_menu li:nth-child(3){
width: 60px;
text-align: center;
}
.bmy_menu li:nth-child(4) {
transform: rotateY(180deg);
}
.bmy_close {
top: 40px;
right: 40px;
width: 40px;
height: 40px;
font-size: 24px;
color: #fff;
background-color: #606266;
}
.bmy_prev,
.bmy_next {
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
font-size: 24px;
color: #fff;
background-color: #606266;
border-color: #fff;
}
.bmy_prev {
left: 40px;
}
.bmy_next {
right: 40px;
text-indent: 2px;
}
.bmy_button {
position: absolute;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
opacity: .8;
cursor: pointer;
box-sizing: border-box;
user-select: none;
}
.bmy_image_canvas {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.bmy_image_canvas img {
transition: all 0.3s ease;
}
.sx {
max-height: 100%;
max-width: 100%;
}

15
历届学生/fontendsix/项目练习/上课项目/图片预览/css/clear.css Normal file
View File

@@ -0,0 +1,15 @@
body,
html,
ul,
li,
h2,
h3,
h4,
h5,
h6,
h6,
p {
margin: 0;
list-style: none;
padding: 0;
}

BIN
历届学生/fontendsix/项目练习/上课项目/图片预览/img/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 674 KiB

BIN
历届学生/fontendsix/项目练习/上课项目/图片预览/img/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 438 KiB

BIN
历届学生/fontendsix/项目练习/上课项目/图片预览/img/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1004 KiB

BIN
历届学生/fontendsix/项目练习/上课项目/图片预览/img/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

171
历届学生/fontendsix/项目练习/上课项目/图片预览/js/ImagePreview.js Normal file
View File

@@ -0,0 +1,171 @@
class ImagePreview {
option = {
l: 0,
t: 0,
startX: 0,
startY: 0,
scale: 1,
rotate: 0,
isLongTag: false,
images: [],
startPosition: 0,
showPagination: false,
onChange: () => { },
onClose: () => { }
}
constructor(option) {
if (option.hasOwnProperty("images") && option.images.length != 0) {
this.option.startPosition = option.startPosition || this.option.startPosition;
this.option.images = option.images || this.option.images;
this.option.showPagination = option.showPagination || this.option.showPagination;
this.option.onChange = option.onChange || this.option.onChange;
this.option.onClose = option.onClose || this.option.onClose;
this.initHTML();
} else {
throw new Error("images必传，images不能为空！！！")
}
}
initHTML() {
$("body").insertAdjacentHTML("beforeend", `
<div class="bmy_image_preview">
<div class="bmy_image_canvas">
<img class="bmy_preview sx"
style="transform: scale(1) rotate(0deg); margin-left: 0px; margin-top: 0px; "
src="${this.option.images[this.option.startPosition]}" alt="">
</div>
<div class="bmy_mask"></div>
<i class="iconfont icon-closedx bmy_button bmy_close"></i>
<i class="iconfont icon-zuo bmy_button bmy_prev"></i>
<i class="iconfont icon-zhankai-copy bmy_button bmy_next"></i>
<ul class="bmy_menu">
<li>
<i class="iconfont icon-suoxiao"></i>
</li>
<li>
<i class="iconfont icon-fangda"></i>
</li>
<li>
<i class="iconfont bl icon-fullscreen"></i>
</li>
<li>
<i class="iconfont icon-shuaxin left_xz"></i>
</li>
<li>
<i class="iconfont icon-shuaxin right_xz"></i>
</li>
</ul>
</div>
`);
this.onEvent()
}
onEvent() {
$(".bmy_close").onclick = () => {
$("body").removeChild($(".bmy_image_preview"))
this.option.onClose()
}
$(".bmy_prev").onclick = () => {
this.option.startPosition--
this.option.startPosition < 0 ? this.option.startPosition = this.option.images.length - 1 : ''
this.changeImgSrc()
}
$(".bmy_next").onclick = () => {
this.option.startPosition++
this.option.startPosition >= this.option.images.length ? this.option.startPosition = 0 : ''
this.changeImgSrc()
}
$(".icon-suoxiao").onclick = () => {
if (this.option.scale > 0.2) {
this.option.scale = Number((this.option.scale - 0.2).toFixed(1));
this.ScaleAndRotate()
}
}
$(".icon-fangda").onclick = () => {
this.option.scale += 0.2;
this.ScaleAndRotate()
}
$(".left_xz").onclick = () => {
this.option.rotate -= 90;
this.ScaleAndRotate()
}
$(".right_xz").onclick = () => {
this.option.rotate += 90
this.ScaleAndRotate()
}
$(".bl").onclick = () => {
if ($(".bl").classList.contains("icon-fullscreen")) {
$(".bmy_preview").classList.remove("sx")
this.option.scale = 1
this.option.rotate = 0
this.ScaleAndRotate()
} else {
$(".bmy_preview").classList.add("sx")
}
$(".bl").classList.toggle("icon-suoxiao1")
$(".bl").classList.toggle("icon-fullscreen")
}
$(".bmy_preview").onmousedown = (e) => {
e.preventDefault()
this.isLongTag = true;
this.startX = e.screenX;
this.startY = e.screenY;
this.l = parseInt($(".bmy_preview").style.marginLeft);
this.t = $(".bmy_preview").offsetTop;
this.move(".bmy_preview")
}
$(".bmy_preview").onmouseleave = () => {
if (this.isLongTag) {
this.move(".bmy_image_canvas")
}
}
$(".bmy_image_preview").onmouseup = () => {
this.isLongTag = false;
$(".bmy_preview").onmousemove = null
$(".bmy_image_canvas").onmousemove = null
}
}
move(className) {
$(className).onmousemove = (ev) => {
ev.preventDefault()
var moveX = ev.screenX, moveY = ev.screenY;
var newX = moveX - this.startX, newY = moveY - this.startY;
$(".bmy_preview").style.marginLeft = `${newX + this.l}px`;
$(".bmy_preview").style.marginTop = `${newY + this.t}px`;
}
}
ScaleAndRotate() {
$(".bmy_preview").style.transform = `scale(${this.option.scale}) rotate(${this.option.rotate}deg)`
}
changeImgSrc() {
this.option.onChange(this.option.startPosition)
$(".bmy_preview").src = this.option.images[this.option.startPosition]
}
}
function $(className) {
return document.querySelector(className)
}