no message
This commit is contained in:
A1300399510
parent
b40dfa5424
commit
95a13a897a
@ -68,6 +68,10 @@
|
||||
.boxbox .tab a {
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.boxbox .tab a:hover {
|
||||
text-decoration: underline;
|
||||
color: #000000;
|
||||
}
|
||||
.boxbox .tab .img {
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
|
||||
@ -74,6 +74,10 @@
|
||||
padding-left: 24px;
|
||||
a {
|
||||
color: #7f7f7f;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
.img {
|
||||
width: 6px;
|
||||
|
||||
@ -31,6 +31,10 @@
|
||||
.boxbox .tab a {
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.boxbox .tab a:hover {
|
||||
text-decoration: underline;
|
||||
color: #000000;
|
||||
}
|
||||
.boxbox .tab .current {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
|
||||
@ -31,6 +31,10 @@
|
||||
|
||||
a {
|
||||
color: #7f7f7f;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.current {
|
||||
|
||||
@ -28,6 +28,10 @@
|
||||
.boxbox .tab a {
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.boxbox .tab a:hover {
|
||||
text-decoration: underline;
|
||||
color: #000000;
|
||||
}
|
||||
.boxbox .tab .img {
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
|
||||
@ -26,6 +26,10 @@
|
||||
padding-left: 24px;
|
||||
a {
|
||||
color: #7f7f7f;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
.img {
|
||||
width: 6px;
|
||||
|
||||
@ -33,6 +33,10 @@
|
||||
.boxbox .tab a {
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.boxbox .tab a:hover {
|
||||
text-decoration: underline;
|
||||
color: #000000;
|
||||
}
|
||||
.boxbox .tab .current {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
|
||||
@ -29,8 +29,13 @@
|
||||
height: 10px;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #7f7f7f;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.current {
|
||||
|
||||
137
html/1.html
137
html/1.html
@ -1,88 +1,53 @@
|
||||
<!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>
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,body{
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: lightblue;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 8px solid;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.content {
|
||||
width: 184px;/* width: 100px; */
|
||||
height: 184px;/* height: 100px; */
|
||||
background: url(./flower.jpg) center/cover;
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
.active {
|
||||
border: 8px dashed #ccc;
|
||||
background-color: lightgoldenrodyellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="content" draggable="true"></div>
|
||||
</div>
|
||||
<div class="container"></div>
|
||||
<div class="container"></div>
|
||||
<div class="container"></div>
|
||||
<div class="container"></div>
|
||||
<script>
|
||||
//拖拽的元素
|
||||
const content = document.querySelector('.content')
|
||||
content.addEventListener('dragstart', dragstart)
|
||||
function dragstart(){
|
||||
setTimeout(() =>{ //setTimeout可以让元素不要消失得这么快
|
||||
this.classList.add('hide') //当拖拽开始时隐藏该元素
|
||||
})
|
||||
}
|
||||
content.addEventListener('dragend',dragend)
|
||||
function dragend(){
|
||||
this.classList.remove('hide') //当拖拽结束时显示该元素
|
||||
}
|
||||
//目标元素
|
||||
const container = document.querySelectorAll('.container')
|
||||
container.forEach((item)=>{
|
||||
item.addEventListener('dragleave',dragleave)
|
||||
item.addEventListener('dragenter',dragenter)
|
||||
item.addEventListener('dragover',dragover)
|
||||
item.addEventListener('drop',drop)
|
||||
})
|
||||
function dragleave() {
|
||||
this.classList.remove('active') //当元素移出该区域时，取消高亮
|
||||
}
|
||||
function dragenter() {
|
||||
this.classList.add('active') //当元素移动到该区域上时高亮显示
|
||||
}
|
||||
//drop事件要和dragover事件一起使用才有效果，注意阻止事件
|
||||
function dragover(e){
|
||||
e.preventDefault();
|
||||
}
|
||||
function drop(e){ //当拖拽元素在目标元素上同时鼠标放开时，需要将拖拽元素放到这个容器中
|
||||
e.preventDefault();
|
||||
this.append(content) //将拖拽元素放到这个容器中
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<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>
|
||||
<style>
|
||||
.box {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
border-radius: 40px;
|
||||
border: 1px solid #000;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 23px;
|
||||
height: 15px;
|
||||
border-radius: 40px;
|
||||
background-color: aqua;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 2px;
|
||||
animation: show 3s forwards;
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
0% {
|
||||
left: 2px;
|
||||
}
|
||||
10% {
|
||||
left: 2px;
|
||||
width: 30px;
|
||||
}
|
||||
30% {
|
||||
left: 20px;
|
||||
width: 30px;
|
||||
}
|
||||
100% {
|
||||
left: 20px;
|
||||
width: 23px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user