~~~html
<!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>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
#ul {
position: relative;
top: 0px;
left: 0px;
}
li {
width: 200px;
height: 100px;
margin: 10px;
background-color: #f00;
color: #fff;
text-align: center;
font-size: 60px;
transition: all 0.3s ease-out;
}
</style>
</head>
<body>
<div style="height: 300px;overflow: hidden;">
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<button id="start">走起来</button>
<button id="reset">复位</button>
<script>
const ul = document.getElementById('ul')
const start = document.getElementById('start')
const reset = document.getElementById('reset')
let timerId
start.onclick = () => {
if(timerId) return
timerId = setInterval(() => {
const firstLi = document.querySelector('#ul li:first-child')
ul.style.transition = 'all 0.5s ease-out'
firstLi.style.opacity = 0
ul.style.top = -110 + 'px'
setTimeout(() => {
firstLi.removeAttribute('style')
// 模拟随机添加数据
// const count = Math.random() * 10
// for(let i = count; i >0; i--) {
// ul.appendChild(firstLi.cloneNode(true))
// }
ul.appendChild(firstLi)
ul.style.transition = ''
ul.style.top = 0
}, 500)
}, 2000)
}
reset.onclick = () => {
clearInterval(timerId)
timerId = undefined
location.reload()
}
</script>
</body>
</html>
~~~
- 前端指南
- 基础
- HTML、HTTP、web综合问题
- css部分
- 学习指南
- 开发指南
- css指南
- JavaScript
- 视图、文件
- canvas
- 二维码的生成
- 64码及图片
- weui
- Promise
- 第三方js
- 网络请求
- 字符串，数组，时间
- 时间类
- Css
- 布局封装
- 媒体布局
- 九宫格图片自适应
- 两行显示，且省略
- uni-app
- uniapp踩坑指南
- 表单类
- 商品规格
- 页面操作
- H5端返回按钮不显示
- H5解决浏览器跨域问题
- uView——Waterfall 瀑布流
- uniapp中使用复制功能(复制文本到粘贴板)
- 动态导航栏的实现
- React
- React基础
- 微信小程序
- 上传多图
- uni-app 微信小程序生成小程序码二维码带参数
- 小程序分享图片给好友，到朋友圈，保存到本地
- 缓存封装
- Vue
- 深度作用选择器deep
- 使用js实现列表无限循环滚动（横向）
- js 无限循环垂直滚动列表
- 可视化
- AntV
- 玫瑰图