整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
