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

88
历届学生/刘合群/2019-07-22/index.html Normal file
View File

@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tabs 切换</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
body,ul,li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tabs-title {
overflow: hidden;
}
.tabs-title li {
float: left;
margin-right: 20px;
}
.tabs-content li {
display: none;
}
.title-on {
color: red;
}
.content-on {
display: block !important;
}
</style>
</head>
<body>
<div class="main">
<ul class="tabs-title">
</ul>
<ul class="tabs-content">
</ul>
</div>
<script>
var TitleArr = [ '体育', '财经', '娱乐', '社会' ];
var ContentArr = [ '体育的内容', '财经的内容', '娱乐的内容', '社会的内容' ];
// 渲染 title 和 content 数组到页面上显示出来
function RenderPage() {
TitleArr.forEach(function(val,index){
document.querySelector(".tabs-title").innerHTML += `<li class="${index == 0 ? 'title-on': ''}">${val}</li>`
})
ContentArr.forEach(function(val,index){
document.querySelector(".tabs-content").innerHTML += `<li class="${index == 0 ? 'content-on': ''}">${val}</li>`
})
}
RenderPage()
var TitleLi = $(".tabs-title li");
var ContentLi = $(".tabs-content li");
TitleLi.on("click", function() {
$(this).addClass('title-on').siblings().removeClass('title-on')
$(ContentLi[$(this).index()]).addClass('content-on').siblings().removeClass('content-on')
})
// TitleLi.forEach(function(val,index){
// val.onclick = function () {
// TitleLi.forEach(function(el,i){
// el.className = ""
// ContentLi[i].className = ""
// })
// ContentLi[index].className = "content-on"
// val.className = "title-on"
// }
// })
</script>
</body>
</html>

132
历届学生/刘合群/2019-07-22/qqdemo.html Normal file
View File

@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>qq音乐案例</title>
<style>
body,ul,li {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.drown li{
float: left;
margin-left: 20px;
position: relative;
}
.menu {
display: none;
position: absolute;
}
.menu li {
clear: left;
margin-left: 0px;
width: 100px;
}
.drown li:hover .menu{
display: block;
}
.drop-list {
display: none;
}
.search:focus+.drop-list{
display: block;
}
.box {
width: 224px;
height: 224px;
position: relative;
overflow: hidden;
}
.box img {
width: 224px;
height: 224px;
transition: all 0.3s;
}
.play {
width: 49px;
height: 49px;
background: #fff;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -24.5px;
margin-top: -24.5px;
text-align: center;
overflow: hidden;
opacity: 0;
transition: all 0.8s;
}
.play-action {
width: 0px;
height: 0px;
background: #d2c4c4;
border-top: 16px solid #fffcfc;
border-left: 16px solid #000;
border-right: 16px solid #fff;
border-bottom: 16px solid #fff;
margin: 0 auto;
margin-top: 8px;
margin-left: 19px;
}
.box:hover img {
width: 230px;
height: 230px;
}
.box:hover .play {
opacity: 1;
}
</style>
</head>
<body>
<div class="drown">
<ul>
<li>我的音乐</li>
<li>
客户端音乐
<ul class="menu">
<li>客户端音乐1</li>
<li>客户端音乐2</li>
</ul>
</li>
<li>音乐号</li>
</ul>
</div>
<br><br><br><br><br><br><br><br>
<input class="search" type="text" placeholder="搜索音乐"/>
<ul class="drop-list">
<li>该死的温柔</li>
<li>该死的温柔</li>
<li>该死的温柔</li>
<li>该死的温柔</li>
</ul>
<br><br><br><br><br><br><br><br>
<div class="box">
<img src="https://p.qpic.cn/music_cover/PiajxSqBRaEISibhtdxpkLprufpT7OzywmzpYlQtrEhYnQ0Rb0ibdicucw/300?n=1" alt="">
<div class="play">
<div class="play-action"></div>
</div>
</div>
</body>
</html>

3
历届学生/刘合群/2019-07-22/笔记.txt Normal file
View File

@@ -0,0 +1,3 @@
1: 弹性盒子
2: css3 动画效果
3: ajax

185
历届学生/刘合群/2019-07-22/轮播图.html Normal file
View File

@@ -0,0 +1,185 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> js 轮播图 </title>
<style>
body,ul,li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.main {
width: 520px;
height: 280px;
margin: 0 auto;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.item {
width: 1560px;
overflow: hidden;
width: 1560px;
overflow: hidden;
position: absolute;
transition: all 0.3s;
}
.item li {
float: left;
}
.action {
width: 100%;
position: absolute;
top: 50%;
margin-top: -25px;
padding: 0 10px;
box-sizing: border-box;
}
.action div{
width: 50px;
height: 50px;
text-align: center;
line-height: 43px;
color: #ffffffb0;
font-size: 33px;
background: #00000070;
border-radius: 100%;
display: inline-block;
}
.action-right {
float: right;
}
.yuandian {
position: absolute;
left: 50%;
margin-left: -30px;
height: 40px;
bottom: 0;
z-index: 9;
}
.yuandian li {
float: left;
width: 10px;
height: 10px;
border-radius: 100%;
margin-right: 10px;
background: #fff;
}
.active {
background: red !important;
}
</style>
</head>
<body>
<div class="main">
<ul class="item" style="left:0px">
<li>
<img src="https://img.alicdn.com/simba/img/TB1Z2nmeW5s3KVjSZFNSuwD3FXa.jpg" alt="">
</li>
<li>
<img src="https://img.alicdn.com/simba/img/TB1IvbNaEY1gK0jSZFCSuwwqXXa.jpg" alt="">
</li>
<li>
<img src="https://img.alicdn.com/tfs/TB1YKULarH1gK0jSZFwXXc7aXXa-520-280.jpg_q90_.webp" alt="">
</li>
</ul>
<ul class="yuandian">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div class="action">
<div class="action-left"> < </div>
<div class="action-right"> > </div>
</div>
</div>
<script>
var timer, currenIndex = 0;
document.querySelector(".action-right").onclick = function () {
var style = parseInt(document.querySelector(".item").style.left)
var newLeft = (style - 520) + 'px';
if(currenIndex>=2) {
currenIndex = -1
}
currenIndex++
liandongyuand()
if(style <= -1040) {
document.querySelector(".item").style.left = '0px'
} else {
document.querySelector(".item").style.left = newLeft
}
}
document.querySelector(".action-left").onclick = function () {
var style = parseInt(document.querySelector(".item").style.left)
var newLeft = (style + 520) + 'px';
if(currenIndex<=0) {
currenIndex = 3
}
currenIndex--
liandongyuand()
if(style>=0) {
document.querySelector(".item").style.left = '-1040px'
} else {
document.querySelector(".item").style.left = newLeft
}
}
document.querySelector(".main").onmousemove = function () {
clearInterval(timer)
}
document.querySelector(".main").onmouseout = function () {
autoPlay()
}
function liandongyuand () {
var li = document.querySelectorAll(".yuandian li");
li.forEach(function(val) {
val.className = ""
})
li[currenIndex].className = "active"
}
function ydClick () {
var li = document.querySelectorAll(".yuandian li");
li.forEach(function(val,index) {
val.onclick = function () {
li.forEach(function(val) {
val.className = ""
})
val.className = "active"
offsetLeft(index)
}
})
}
function offsetLeft(index) {
document.querySelector(".item").style.left = (index * -520 ) + 'px'
}
function autoPlay () {
timer = setInterval(function() {
document.querySelector(".action-right").onclick()
}, 1000)
}
ydClick()
autoPlay()
</script>
</body>
</html>