整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
S文字抖动效果，重点是DIV、数组、定时器的应用。
将文字放于显示的层上，组成数组，用setTimeOut()函数来操纵。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS文字抖动效果</title>
</head>
<body>
<script language="javascript">
var strname="欢迎观看钱庄王员外制作的文字抖动效果";
var strlen=strname.length;
var dstr="";
var ssize=50;
function fdiv(){
for (i=0;i<strlen;++i){
dstr=dstr+'<div id=aa'+i+' style="font-size:20px; top:200px; left:'+ssize+'px; position:absolute;">'+strname.charAt(i)+'</div>';
ssize=ssize+22;
}
document.write(dstr);
}
fdiv();
var sumstr=new Array(-1,-6,-10,-15,-10,-6,-1);
var sublen=sumstr.length;
var i=1;
function dmove(){
var s="";
if (i!=1){Parray(i);}
Larray(i);
++i;
if (i==strlen) i=0;
setTimeout("dmove()",100);
}
function Parray(n){
for (i1=1;i1<n;++i1){
ob=document.all("aa"+(i1));
ob.style.top=200+"px";
}
}
function Larray(n){
for (i2=0;i2<sublen;++i2){
if ((n+i2)<strlen){
ob=document.all("aa"+(n+i2));
ob.style.top=((200+sumstr[i2])+"px");
}
}
}
dmove();
</script>
</body>
</html>
代码是完整的，copy下来测试一下即可。
看演示及效果视频，请点击下面链接：
JS制作文字抖动效果演示
(科技自媒体原创作者：钱庄王员外)
么是js防抖动?
我是这样理解的，限制某个事件（函数）在指定时间内不重复触发。比如有一个输入框，当用户输入后进行远程搜索，如果不限制频次，用户每输入一个字符就会发起网络请求，但请求的很大可能不是用户想要的，这时候就可以用防抖动机制，规定用户在500ms内没有新的输入才发起网络请求。
一个简单的防抖实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>debouce-每天一个知识点</title>
</head>
<body>
<input type="text" id="name" />
</body>
<script>
//防抖函数
function debounce(fn, wait=500) {
var timer;
return function() {
clearTimeout(timer);
timer=setTimeout(fn, wait);
};
}
//自己业务函数
function yourFunction() {
var value=document.querySelector("#name").value;
console.log(value);
}
//使用
document
.querySelector("#name")
.addEventListener("input", debounce(yourFunction, 500));
</script>
</html>这是没有防抖动的效果
这是加了防抖函数的效果
者 | 大澈
大家好，我是大澈！
又是好久没更文了，前阵子驾着新车回了趟老家，很“幸运”的经历了平原县地震的余波。
回想当时，半夜凌晨，房屋晃动，如同身处过山车，一切都很不真实。虽然震感时间很短暂，但是现在依旧让我记忆犹新，人类在大自然面前真的是太渺小了，很多时候真的是力不从心。
所以，真心想和大家说一句，生活不易，及时行乐，珍惜身边人，且行且珍惜。
ONE
需求分析，问题描述
一、需求
一个可以滚动的菜单，为它添加一个可以下拉滚动的提示。要求滚动到菜单最底部时，隐藏下拉滚动的提示，否则让其一直显示。
二、问题
1、如何实现滚动条效果？
2、如何判断是否滚动到底部？
TWO
解决问题，答案速览
实现代码如下，复制粘贴即可直接使用。
代码中滚动条的实现使用了element的el-scrollbar组件。组件中包裹的第一个div，指的是需要滚动的视图。组件中包裹的第二个div，指的是下拉滚动提示的图标，这里根据需求进行设置，可以更换静态的或者那种闪烁跳跃的动态提示图标。
// 1、模版
<el-scrollbar max-height="calc(100vh - 84px)" @scroll="handleScroll" ref="myScrollbar">
<div class="sideBarIn"></div>
<div class="pcSign pcIcon" v-if="isShowIcon">
<img class="iconImg" src="../assets/images/common/xiaGery.png"></div>
</el-scrollbar>
// 2、逻辑
// 滚动条事件
const handleScroll=(val)=> {
// 防止Scrollbar实例为空
if (!myScrollbar.value) {
return
}
// 判断是否滚动到底部
let isScrollToEnd=Number(myScrollbar.value.wrapRef.scrollTop.toFixed(0))
+ Number(myScrollbar.value.wrapRef.clientHeight.toFixed(0))===Number(myScrollbar.value.wrapRef.scrollHeight.toFixed(0));
if (isScrollToEnd) {
// 滚动到底部的处理逻辑
isShowIcon.value=false
} else {
// 非滚动到底部的处理逻辑
isShowIcon.value=true
}
}
// 3、样式
.pcIcon {
width:100%;
height: 100px;
position: absolute;
bottom: -4px;
left: 0;
text-align: center;
line-height: 130px;
background: linear-gradient(to bottom, rgba(234, 234, 234, 0.5), rgba(234, 234, 234, 1));
.iconImg {
width: 20px;
height: 20px;
}
}
.pcSign{
display: block;
}THREE
问题解析，知识总结
一、如何实现滚动条效果？
实现滚动条效果有两种实现方式：利用css的overflow: scroll属性、利用element的el-scrollbar组件。
1、overflow: scroll属性
在div元素上添加 overflow-y: scroll; css属性，就能显示出一个滚动条，如果不指定是x或y轴，则水平和垂直都会出现滚动条。
当然，前提是你需要指定div元素的高度或者最大高度。
2、el-scrollbar组件
一般在vue项目中，我们可直接使用element的el-scrollbar组件，因为官方为我们提供了许多API，以及各种适配优化。
el-scrollbar组件的属性如下：
el-scrollbar组件的事件如下：
el-scrollbar组件的实例属性如下：
二、如何判断是否滚动到底部？
这里判断是否滚动到底部的关键在于scrollTop+clientHeight是否等于scrollHeight的值。只有当滚动的距离+可视区域的高度，与scrollHeight相等时，才证明滚动条滚动到了底部。
同样的，如果scrollHeight与可视区域的高度直接就相等时，又说明元素不可以滚动，也就没有滚动条。这一点在有此需求时，可以进行实用。
元素的几个宽高属性释义如下：
- END -
*请认真填写需求信息，我们会在24小时内与您取得联系。
