初学者--滚动条（一）----在路上（2）

来源：互联网发布：淘宝企业店铺如何报税编辑：程序博客网时间：2024/05/21 11:12

今天整理了一下滚动条的有关知识，告诉自己依然努力着

我觉得可以有很多种写法，就我现在知道的而言，就在这里留下两种简单方法。

1：动画方法（背景定位）

先给滚动条设置样式，在设置背景大小的时候，要注意这里设置的大小要和滚动条的长度是倍数关系 background-size:*px *px；

（背景线性倾斜）background-image:linear-gradient(某deg,个颜色所占比例）

对滚动条动画进行线性无限执行 linear infinite；

transition: all 1s；当前元素只要有“属性”发生变化时，可以平滑的进行过渡

注：这种方法背景颜色没有过渡效果

so，来个小例子：

.gdt{    width: 1000px;    height: 50px;    background: #000;    background-size: 50px 50px;    background-image:linear-gradient(135deg,#900 25%,    transparent 25%,    transparent 50%,    #900 50%,    #900 75%,    transparent 75%,    transparent 100%    );    animation: animation名 1s  linear infinite;}

@keyframes animation名 {

from{

background-position:水平px 垂直px ;

}

to{

background-position:水平px垂直px; }

}

2.第二种方法就要涉及到JS了，但也是让他进行背景定位

还要用到定时器，以达到滚动条无限执行，但背景定位写法格式与动画不同。但第一个值任然是水平方向，第二个值为垂直方向。

so，来点干货：

<script>

    var ii=$(".gdt");    var  i=0;    setInterval(fn,1);    function fn() {        i-=1;（+=与-=代表滚动条的背景滚动方向，+=向右滚动，-=向左）        ii.css({"backgroundPosition":i+"px"+" "+"0px"});    }

</script>

0 0