初學者 滾動條(一) 在路上(2)

2021-07-25 07:42:37 字數 1086 閱讀 1008

今天整理了一下滾動條的有關知識,告訴自己依然努力著

我覺得可以有很多種寫法,就我現在知道的而言,就在這裡留下兩種簡單方法。

1:動畫方法(背景定位)

先給滾動條設定樣式,在設定背景大小的時候,要注意這裡設定的大小要和滾動條的長度     是倍數關係

background-size:*px *px; (

背景線性傾斜

background-image:linear-gradient(

deg,

個顏色所佔比例

)對滾動條動畫進行線性無限執行

linear infinite

;transition: all 1s;當前元素只要有「屬性」發生變化時,可以平滑的進行過渡

注:這種方法背景顏色沒有過渡效果

so,來個小例子:

.

gdt

@keyframes animation名

to}

2.第二種方法就要涉及到js了,但也是讓他進行背景定位

還要用到定時器,以達到滾動條無限執行,但背景定位寫法格式與動畫不同。但第乙個值任然是水平方向,第二個值為垂直方向。

so,來點乾貨:
<script>
varii=$(".gdt");

vari=0;

setinterval(fn,1);

function fn() );

}

乙個程式設計初學者的成長歷程2

上次說了在c語言中輸入數要先給數下定義電腦才會明白,其中除了整數用 int 表示,實數可以用 double 來進行表示。另外如 0.234 在程式設計中通常用 234e 3 來表示,我相信數學不錯的各位應該看出來了 e 代表的是10,這不過是 0.234 的指數表示。另外如果我們想要表示如圖所示的迴...

讓div滾動條一直保持在最下方

之前一直使用jquery進行操作。最近遇到這樣的需求,要求div的滾動條始終在最下面。div的id為test 使用 text scrolltop text scrollheight 來進行控制。發現不起作用。後來根據大佬的使用原生的dom獲取 var divscll document.getelem...

乙個菜雞前端初學者的筆記,HTML css(2)

justify content flex start flex end center space between space around 起點對齊 右對齊 居中 兩端對齊 間隔相等 交叉軸的起點對齊 justify content flex start div align items flex s...