打字机效果和拉拽方框伸缩
打字机效果
今年最火的应该就是chatGpt,在chatgpt显示答案时，会有打字机效果，会将自己的答案以单个字的形式呈现在页面上。在上班摸鱼时，简单的写了一下当做自己联系。主要是使用css中animation进行实现的。
<!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>
</head>
<body>
<div class="box">
<div class="box-input"></div>
<div class="box-line"></div>
</div>
<button id="button">打字</button>
</body>
<script>
const showText = '人生就像一场旅行，有时候你要走的路很长，有时候你要遇到坎坷和曲折，但只要你勇于面对挑战，勇敢前行，你就会发现：人生的旅途是如此美妙而又充满惊喜。';
const button = document.getElementById('button');
const boxInput = document.getElementsByClassName('box-input')[0];
const boxLine = document.getElementsByClassName('box-line')[0];
button.onclick = function () {
boxLine.style.opacity = 1;
boxLine.style.animation = 'line 1s infinite';
const textArr = showText.split('');
let inputValue = '';
let currentLogIndex = 0;
const interval = setInterval(() => {
boxLine.style.animation = 'none';
inputValue = inputValue.concat(textArr[currentLogIndex]);
boxInput.innerHTML = inputValue;
if (currentLogIndex >= textArr.length - 1) {
boxLine.style.animation = 'line 1s infinite';
const timeout = setTimeout(() => {
currentLogIndex = 0;
boxLine.style.animation ='none';
boxLine.style.opacity = 0;
clearTimeout(timeout)
}, 1000)
clearInterval(interval);
}
currentLogIndex++;
}, 150)
}
</script>
<style>
.box {
width: 500px;
height: 300px;
border: 1px solid #000;
margin-bottom: 5px;
padding: 5px;
}
.box-line {
width: 2px;
height: 20px;
background: #000;
margin-left: 2px;
margin-top: 1px;
animation: line 1s infinite;
transform: translate(2px, 3px);
display: inline-block;
}
.box-input {
display: inline;
width: 450px;
word-wrap: break-word;
overflow: hidden
}
@keyframes line {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
</style>
</html>拉拽方框伸缩大小
马上就是十一假日，今天公司的同学很多都已经请假走了。于是其他人的心也都飞了。下午又在刷帖子，看见了一个方框伸缩的效果，想着无聊就自己写一下。
在写这个效果的时候顺便复习了一下，鼠标的点击移动效果。其实代码很好理解。在外部盒子中套8个小块，分别定位在大盒子的四周边框上。在挪动小块时，使盒子的对应边框随之移动，关键是要随之增加盒子的对应宽度或者高度
<!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>
</head>
<body>
<div class="box" id="box">
<!-- 上左 -->
<div class="zoom-div left-top" draggable></div>
<!-- 上中 -->
<div class="zoom-div top-middle" draggable></div>
<!-- 上右 -->
<div class="zoom-div top-right" draggable></div>
<!-- 中左 -->
<div class="zoom-div left-middle" draggable></div>
<!-- 中右 -->
<div class="zoom-div right-middle" draggable></div>
<!-- 下左 -->
<div class="zoom-div left-bottom" draggable></div>
<!-- 下中 -->
<div class="zoom-div middle-bottom" draggable></div>
<!-- 下右 -->
<div class="zoom-div right-bottom" draggable></div>
</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', function () {
const box = document.getElementById('box');
const zoomList = document.getElementsByClassName('zoom-div');
let startPoint = {
x: 0,
y: 0,
};
let movePoint = {
x: 0,
y: 0,
}
let currentDom;
let boxWidth = box.offsetWidth;
let boxHeight = box.offsetHeight;
document.addEventListener('mousedown', function (e) {
if (!Array.from(zoomList).includes(e.target)) return;
currentDom = e.target;
startPoint.x = e.clientX;
startPoint.y = e.clientY;
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', dragEnd);
})
const drag = (event) => {
let moveX = event.clientX - startPoint.x; //左右 正为向右负为左; 上下 上为负下为正
let moveY = event.clientY - startPoint.y;
movePoint.x = event.clientX;
movePoint.y = event.clientY;
const currentDomClassStr = currentDom.getAttribute('class');
if (currentDomClassStr.includes('left-middle')) { //中左
box.style.left = `${event.clientX}px`;
console.log(moveX)
box.style.width = `${-moveX + boxWidth}px`
}
if (currentDomClassStr.includes('left-top')) { //上左
box.style.left = `${event.clientX}px`;
box.style.top = `${event.clientY}px`;
box.style.width = `${-moveX + boxWidth}px`
box.style.height = `${-moveY + boxHeight}px`
}
if (currentDomClassStr.includes('top-middle')) { //上中
box.style.top = `${event.clientY}px`;
box.style.height = `${-moveY + boxHeight}px`
}
if (currentDomClassStr.includes('top-right')) { //上右
box.style.right = `${event.clientX}px`;
box.style.top = `${event.clientY}px`;
box.style.width = `${moveX + boxWidth}px`
box.style.height = `${-moveY + boxHeight}px`
}
if (currentDomClassStr.includes('right-middle')) { //上右
box.style.right = `${event.clientX}px`;
box.style.width = `${moveX + boxWidth}px`
}
if (currentDomClassStr.includes('left-bottom')) { //下左
box.style.left = `${event.clientX}px`;
box.style.bottom = `${event.clientY}px`;
box.style.width = `${-moveX + boxWidth}px`
box.style.height = `${moveY + boxHeight}px`
}
if (currentDomClassStr.includes('middle-bottom')) { //下左
box.style.bottom = `${event.clientY}px`;
box.style.height = `${moveY + boxHeight}px`
}
if (currentDomClassStr.includes('right-bottom')) { //下左
box.style.right = `${event.clientX}px`;
box.style.bottom = `${event.clientY}px`;
box.style.width = `${moveX + boxWidth}px`
box.style.height = `${moveY + boxHeight}px`
}
}
const dragEnd = (event) => {
boxWidth = box.offsetWidth;
boxHeight = box.offsetHeight;
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', dragEnd);
}
});
</script>
<style>
body {
position: relative;
}
.box {
position: absolute;
top: 100px;
left: 200px;
border: 1px solid rgb(150, 147, 147);
width: 300px;
height: 300px;
}
.zoom-div {
position: absolute;
width: 6px;
height: 6px;
border: 1px solid rgb(30, 29, 29);
background: rgb(30, 29, 29);
}
.left-top {
left: -3px;
top: -3px;
cursor: nw-resize;
}
.top-middle {
left: calc(50% - 3px);
top: -5px;
cursor: n-resize;
}
.top-right {
left: calc(100% - 4px);
top: -4px;
cursor: ne-resize;
}
.left-middle {
top: 50%;
left: -5px;
cursor: w-resize;
}
.right-middle {
top: 50%;
left: calc(100% - 3px);
cursor: e-resize;
}
.left-bottom {
top: calc(100% - 3px);
left: -4px;
cursor: sw-resize;
}
.middle-bottom {
top: calc(100% - 3px);
left: calc(50% - 3px);
cursor: s-resize;
}
.right-bottom {
top: calc(100% - 3px);
left: calc(100% - 3px);
cursor: se-resize;
}
</style>
</html>本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 从安的博客！
相关推荐
评论