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

6
历届学生/陈一航/2020-04-05/css/clear.css Normal file
View File

@@ -0,0 +1,6 @@
body,ul,li,h1,h2,h3,h4,h5,h6,p,a,input{
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
}

58
历届学生/陈一航/2020-04-05/index.html Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿照淘宝滚动固定</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
height: 3000px;
background: #8d8d8d;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
height: 60px;
border-bottom: 1px solid #d5d2d2;
margin: 0 auto;
background: #fff;
}
.fixed {
position: fixed;
left: 0;
top: 0;
width: 100%;
}
</style>
</head>
<body>
<ul class="menu">
<li>左侧</li>
<li>右侧</li>
</ul>
<script>
var body = document.querySelector("body")
body.onscroll = function (event) {
console.log(event)
var Y = document.documentElement.scrollTop;
if (Y > 300) {
document.querySelector(".menu").className = "menu fixed"
} else {
document.querySelector(".menu").className = "menu"
}
}
</script>
</body>
</html>

69
历届学生/陈一航/2020-04-05/js/swiper.js Normal file
View File

@@ -0,0 +1,69 @@
var timer;
var LiArr = document.querySelectorAll(".yd li");
$(".dh_right").onclick = function () {
OffSetDistance(-520)
changeYd()
}
$(".dh_left").onclick = function () {
OffSetDistance(520)
changeYd()
}
function OffSetDistance(nums) {
var Offset = parseInt($(".lb_img").style.left) + nums;
$(".lb_img").style.left = `${Offset}px`
if (Offset < -1040) {
console.log("没有")
$(".lb_img").style.left = "0px";
}
if (Offset > 0) {
$(".lb_img").style.left = "-1040px";
}
}
function changeYd() {
var index = Math.abs(parseInt($(".lb_img").style.left)) / 520;
LiArr.forEach(function(val){
val.className = ""
})
LiArr[index].className = "active"
}
function BindYdClick() {
LiArr.forEach(function(val,index){
val.onclick = function () {
LiArr.forEach(function(v){
v.className = ""
})
val.className = "active"
$(".lb_img").style.left = `${index * -520}px`;
}
})
}
$(".main").onmouseover = function () {
clearInterval(timer)
}
$(".main").onmouseout = function () {
autoPlay()
}
function autoPlay() {
timer = setInterval( function(){
OffSetDistance(-520)
changeYd()
// $(".dh_right").onclick()
}, 1000 )
}
autoPlay()
BindYdClick()
function $(className){
return document.querySelector(className)
}

53
历届学生/陈一航/2020-04-05/message.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言</title>
<style>
.main {
width: 400px;
height: 350px;
margin: 30px auto;
position: relative;
}
textarea {
width: 100%;
height: 100%;
resize: none;
}
.main span {
position: absolute;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="main">
<textarea name="" id="" cols="30" rows="10"></textarea>
<span>300/300</span>
</div>
<script>
var totalNums = 300;
$("textarea").oninput = function () {
var syLength = totalNums - $("textarea").value.length;
if (syLength < 0) {
$("textarea").value = $("textarea").value.substring(0,300)
$("span").innerText = `300/0`
} else {
$("span").innerText = `300/${syLength}`
}
}
function $(className) {
return document.querySelector(className)
}
</script>
</body>
</html>

97
历届学生/陈一航/2020-04-05/swiper.html Normal file
View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<link rel="stylesheet" href="./css/clear.css">
<style>
.main {
width: 520px;
height: 280px;
border: 1px solid #000;
overflow: hidden;
position: relative;
margin: 30px auto;
}
.daohang {
position: absolute;
width: 520px;
height: 36px;
top: 50%;
margin-top: -18px;
z-index: 2;
}
.fs {
width: 40px;
height: 40px;
border-radius: 50%;
color: #fff;
background: #000;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.dh_left {
float: left;
}
.dh_right {
float: right;
}
.lb_img{
width: 1560px;
position: relative;
transition: all 0.3s ease;
}
.lb_img li {
float: left;
}
.yd {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -37.5px;
}
.yd li {
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
float: left;
margin-right: 10px;
}
.active {
background: red !important;
}
</style>
</head>
<body>
<div class="main">
<div class="daohang">
<div class="fs dh_left"> < </div>
<div class="fs dh_right"> > </div>
</div>
<ul class="lb_img" style="left: 0px">
<li><img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt=""></li>
<li><img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt=""></li>
<li><img src="https://img.alicdn.com/tfs/TB1VZo7x4v1gK0jSZFFXXb0sXXa-520-280.jpg_q90_.webp" alt=""></li>
</ul>
<ul class="yd">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script src="./js/swiper.js"></script>
</html>

1
历届学生/陈一航/2020-04-05/任务.txt Normal file
View File

@@ -0,0 +1 @@
模仿淘宝右侧，滚动切换激活样式